Kusunam's Blog

I thought it is just setting a property in default Flex Grid with something like ‘defaultSort” but i seems to be wrong. Flex default Grid do not support something like this but Adobe recommends sorting List on the server side and sent it back to Flex. But, this may not be possible all the times. In my case I am extracting ArrayCollection from XML and need to do this sorting on the client side. There are multiple ways you can do this on client side. Here is the one I started using couple of days back and you can see the original post here.

Solution-1:


Here is the Source for the Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">

<mx:Script>
	<![CDATA[
		import mx.events.DataGridEvent;

	    /* Function to do default sort on Data Grid in ascending order. */
        public function sortAC():void {
			dgSort(dg, 0);
        }

 		private function dgSort(dgName:Object, dgColumn:int):void{
	        dgName.dispatchEvent(
				new DataGridEvent
				(
					DataGridEvent.HEADER_RELEASE,
					false,
					true,
					dgColumn,
					null,
					0,
					null,
					null,
					0
				)
			)
		}

	]]>
</mx:Script>

    <mx:XMLList id="employees">
        <employee>
			<id>2</id>
            <name>Christina Coenraets</name>
            <phone>555-219-2270</phone>
        </employee>
        <employee>
        	<id>3</id>
            <name>Joanne Wall</name>
            <phone>555-219-2012</phone>
        </employee>
        <employee>
        	<id>1</id>
            <name>Maurice Smith</name>
            <phone>555-219-2012</phone>
        </employee>
    </mx:XMLList>
    <mx:Panel title="DataGrid Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="500"
         paddingTop="5" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">

         <mx:Label width="100%" color="0x323232"
            text="Select a row in the DataGrid control."/>

        <mx:DataGrid id="dg" color="0x323232" width="100%" rowCount="3" s
        	dataProvider="{employees}"
        	creationComplete="sortAC()">
            <mx:columns>
                <mx:DataGridColumn dataField="id" headerText="Id"/>
                <mx:DataGridColumn dataField="name" headerText="Name"/>
                <mx:DataGridColumn dataField="phone" headerText="Phone"/>
            </mx:columns>
        </mx:DataGrid>
    </mx:Panel>
</mx:Application>

Solution-2:
Here is another way i found on Adobe website.

Here is the Source for the Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">

<mx:Script>
	<![CDATA[
		    import mx.collections.*;

            /* Function to sort the ICollectionView
               in ascending order. */
            public function sortAC():void {
                var sortA:Sort = new Sort();
                sortA.fields=[new SortField("label")];
                myAC.sort=sortA;
                //Refresh the collection view to show the sort.
                myAC.refresh();
            }
	]]>
</mx:Script>

    <!-- An ArrayCollection with an array of objects. -->
    <mx:ArrayCollection id="myAC">
        <mx:Array id="myArray">
            <mx:Object label="LA" data="Baton Rouge"/>
            <mx:Object label="NH" data="Concord"/>
            <mx:Object label="TX" data="Austin"/>
            <mx:Object label="MA" data="Boston"/>
            <mx:Object label="AZ" data="Phoenix"/>
            <mx:Object label="OR" data="Salem"/>
            <mx:Object label="FL" data="Tallahassee"/>
            <mx:Object label="MN" data="Saint Paul"/>
            <mx:Object label="NY" data="Albany"/>
        </mx:Array>
    </mx:ArrayCollection>

    <mx:DataGrid id="myDG" dataProvider="{myAC}" creationComplete="sortAC()" />

</mx:Application>

3 Responses so far | Have Your Say!

1. 

   Rufor
   April 28th, 2009 at 1:49 am #

   Hi there,
   Ugh, I liked! So clear and positively.
   Thank you
   Rufor

2. 

   Naheed
   April 29th, 2009 at 5:30 pm #

   Srini,
   Your blog is so nice and informative, keep doing this good work, I got interested into flex due to your blog!
   Thanks
   Naheed

3. 

   John1020
   September 21st, 2009 at 5:29 am #

   Very nice site!