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

LVL 1
myBlueSkyAsked:
Who is Participating?
 
dgofmanConnect With a Mentor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.