• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 496
  • Last Modified:

How can we add alphabet separator using Flex Repeater and AS3

How can we add alphabet separator (group/List LinkButtons start with A, C,D.. etc) based on a dataProvider in Flex?

e.g.
A:
AA-1
AC-8
AR-1
AZ-1

C:
CE-1
CR-7
CY-1

The source code is embed.

 
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
        	import mx.collections.ArrayCollection;
            import mx.controls.Alert;

	
			[Bindable]private var arrCol:ArrayCollection=new ArrayCollection
			([
			{id: "22", label: "AA-1"}, 
			{id: "54", label: "AC-8"}, 
			{id: "01", label: "AR-1"}, 
			{id: "44", label: "AZ-1"},
			{id: "53", label: "CE-1"}, 
			{id: "74", label: "CR-7"}, 
			{id: "25", label: "CY-1"}, 
			{id: "98", label: "DD-1"}, 
			{id: "58", label: "LA-1"}, 
			{id: "28", label: "LB-1"}, 
			{id: "88", label: "LB-5"}, 
			{id: "78", label: "LB-1"}, 
			{id: "67", label: "YA-1"},
			{id: "67", label: "YA-7"},
			{id: "64", label: "YA-1"},
			{id: "61", label: "ZT-1"},
			{id: "60", label: "ZZ-6"}
			

			]);
			
		private function LinkButtonClickHanler(evt:Event):void
		{
			Alert.show(evt.currentTarget.label);
		}	
        ]]>
    </mx:Script>
 
 
    <mx:VBox width="350" height="500" borderStyle="solid">
            
        <mx:Repeater id="rep" dataProvider="{arrCol}">
            <mx:LinkButton 
            		label="{String(rep.currentItem.label).toUpperCase()}"
                    click="LinkButtonClickHanler(event)"
                    width="100%"/>
        </mx:Repeater>
        
    </mx:VBox>
 
</mx:Application>

Open in new window

0
myBlueSky
Asked:
myBlueSky
  • 2
  • 2
1 Solution
 
dgofmanCommented:
You can dynamicly populate LinkButton into VBox using ActionScript or use my implementation

    <mx:VBox width="350" height="500" borderStyle="solid">
       
        <mx:Repeater id="rep" dataProvider="{arrCol}">
            <mx:Label width="100%" text="{String(rep.currentItem.label).toUpperCase().charAt(0)}" textAlign="center" fontWeight="bold"
                      visible="{rep.currentIndex ==0 || rep.currentItem.label.charAt(0) != arrCol.getItemAt(rep.currentIndex - 1).label.charAt(0)}"
                      includeInLayout="{rep.currentIndex == 0 || rep.currentItem.label.charAt(0) != arrCol.getItemAt(rep.currentIndex - 1).label.charAt(0)}"/>
            <mx:LinkButton
                label="{String(rep.currentItem.label).toUpperCase()}"
                click="LinkButtonClickHanler(event)"
                width="100%"/>
        </mx:Repeater>
       
    </mx:VBox>
   
0
 
myBlueSkyAuthor Commented:

This is ActionScript implementation with your logic in Repeater

 
private function populateVBox():void
		{
				for(var i:uint = 0; i < arrCol.length; i++)
				{
					var linkButton:LinkButton = new LinkButton();
					linkButton.label = arrCol[i].label;
					
					var label:Label = new Label();
					
					label.text=String(arrCol[i].label.toUpperCase().charAt(0));
					
					if ( i == 0 || arrCol[i].label.charAt(0) != arrCol.getItemAt(i - 1).label.charAt(0))
					{
						myVBox.addChild(label);
					}
					myVBox.addChild(linkButton);

				}
		}

Open in new window

0
 
dgofmanCommented:
Good, you are becaming an expert :)
0
 
myBlueSkyAuthor Commented:
You are the man :)
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now