28
Feb
08

Displaying the sort arrow in a Flex DataGrid control without having to click a column

I’ve seen this question come up a few times recently in various forums/lists and even in my blog comments (see “Changing the default sort arrow skin on a Flex DataGrid control”).

The following example shows how you can display the sort arrow in a DataGrid control in Flex without having the user click on a column header in the DataGrid control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/02/28/displaying-the-sort-arrow-in-a-flex-datagrid-control-without-having-to-click-a-column/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function init():void {
                arrColl.sort = new Sort();
                arrColl.sort.fields = [new SortField("idx", false, true)];
                arrColl.refresh();
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object idx="1" c1="One.1" c2="One.2" />
                <mx:Object idx="2" c1="Two.1" c2="Two.2" />
                <mx:Object idx="3" c1="Three.1" c2="Three.2" />
                <mx:Object idx="4" c1="Four.1" c2="Four.2" />
                <mx:Object idx="5" c1="Five.1" c2="Five.2" />
                <mx:Object idx="6" c1="Six.1" c2="Six.2" />
                <mx:Object idx="7" c1="Seven.1" c2="Seven.2" />
                <mx:Object idx="8" c1="Eight.1" c2="Eight.2" />
                <mx:Object idx="9" c1="Nine.1" c2="Nine.2" />
                <mx:Object idx="10" c1="Ten.1" c2="Ten.2" />
                <mx:Object idx="11" c1="Eleven.1" c2="Eleven.2" />
                <mx:Object idx="12" c1="Twelve.1" c2="Twelve.2" />
                <mx:Object idx="13" c1="Thirteen.1" c2="Thirteen.2" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            creationComplete="init();">
        <mx:columns>
            <mx:DataGridColumn dataField="idx" />
            <mx:DataGridColumn dataField="c1" />
            <mx:DataGridColumn dataField="c2" />
        </mx:columns>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

A big thanks to Rob for the heads up with the solution!

For more information, see http://bugs.adobe.com/jira/browse/SDK-14663.


5 Responses to “Displaying the sort arrow in a Flex DataGrid control without having to click a column”


  1. 1 Steve Feb 29th, 2008 at 4:07 am

    Thanks for this helpful post, glad to see that it’s not only me that has had this problem, much appreciated, keep up the good work!

  2. 2 Hieu Lam Sep 15th, 2008 at 12:52 am

    The solution is good, but I just want to know is there any way that we can showed the up/down arrow without having to refresh (sort) the grid data provider.

  3. 3 Bill J Sep 18th, 2008 at 7:06 am

    Is there a way to programatically get the last column sort? In otherwords say the user has clicked on a particular column header, how would you store the sort associated with that header, along with its direction?

  4. 4 peterd Sep 18th, 2008 at 7:49 am

    Bill J,

    Not sure if this is the best solution, but it seems to work:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white">
    
        <mx:Script>
            <![CDATA[
                import mx.events.DataGridEvent;
    
                private function dataGrid_headerRelease(evt:DataGridEvent):void {
                    // Hang out a while, wait a frame.
                    callLater(delayedSet, [evt]);
                }
    
                private function delayedSet(evt:DataGridEvent):void {
                    lbl1.text = evt.dataField;
                    lbl2.text = dataGrid.columns[evt.columnIndex].sortDescending;
                }
            ]]>
        </mx:Script>
    
        <mx:Array id="arr">
            <mx:Object idx="1" c1="One.1" c2="One.2" />
            <mx:Object idx="2" c1="Two.1" c2="Two.2" />
            <mx:Object idx="3" c1="Three.1" c2="Three.2" />
            <mx:Object idx="4" c1="Four.1" c2="Four.2" />
            <mx:Object idx="5" c1="Five.1" c2="Five.2" />
            <mx:Object idx="6" c1="Six.1" c2="Six.2" />
        </mx:Array>
    
        <mx:DataGrid id="dataGrid"
                dataProvider="{arr}"
                headerRelease="dataGrid_headerRelease(event);">
            <mx:columns>
                <mx:DataGridColumn dataField="idx" />
                <mx:DataGridColumn dataField="c1" />
                <mx:DataGridColumn dataField="c2" />
            </mx:columns>
        </mx:DataGrid>
    
        <mx:Form>
            <mx:FormItem label="dataField:">
                <mx:Label id="lbl1" />
            </mx:FormItem>
            <mx:FormItem label="sortDescending:">
                <mx:Label id="lbl2" />
            </mx:FormItem>
        </mx:Form>
    
    </mx:Application>
    

    If you use an ArrayCollection or XMLListCollection as a data provider, you may be able to access the collection’s underlying sort property and determine the sort order as well.

    In fact, here’s what that would look like too:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white">
    
        <mx:Script>
            <![CDATA[
                import mx.collections.SortField;
                import mx.events.DataGridEvent;
    
                private function dataGrid_headerRelease(evt:DataGridEvent):void {
                    // Hang out a while, wait a frame.
                    callLater(delayedSet, [evt]);
                }
    
                private function delayedSet(evt:DataGridEvent):void {
                    var sortField:SortField = arrColl.sort.fields[0] as SortField;
                    lbl1.text = sortField.name;
                    lbl2.text = sortField.descending.toString();
                }
            ]]>
        </mx:Script>
    
        <mx:ArrayCollection id="arrColl">
            <mx:source>
                <mx:Array>
                    <mx:Object idx="1" c1="One.1" c2="One.2" />
                    <mx:Object idx="2" c1="Two.1" c2="Two.2" />
                    <mx:Object idx="3" c1="Three.1" c2="Three.2" />
                    <mx:Object idx="4" c1="Four.1" c2="Four.2" />
                    <mx:Object idx="5" c1="Five.1" c2="Five.2" />
                    <mx:Object idx="6" c1="Six.1" c2="Six.2" />
                </mx:Array>
            </mx:source>
        </mx:ArrayCollection>
    
        <mx:DataGrid id="dataGrid"
                dataProvider="{arrColl}"
                headerRelease="dataGrid_headerRelease(event);">
            <mx:columns>
                <mx:DataGridColumn dataField="idx" />
                <mx:DataGridColumn dataField="c1" />
                <mx:DataGridColumn dataField="c2" />
            </mx:columns>
        </mx:DataGrid>
    
        <mx:Form>
            <mx:FormItem label="dataField:">
                <mx:Label id="lbl1" />
            </mx:FormItem>
            <mx:FormItem label="sortDescending:">
                <mx:Label id="lbl2" />
            </mx:FormItem>
        </mx:Form>
    
    </mx:Application>
    

    Again, I make no claims this is the “best” approach, just the first thing that came to mind at 7:40am. :)

    Peter

  5. 5 peterd Sep 18th, 2008 at 7:52 am

    Hieu Lam,

    I don’t believe there is a way to show a sort arrow without refreshing the data provider. Or maybe there is, and I just don’t know about it (very likely).

    If you haven’t found a solution yet (and are still reading comments), I suggest asking on the FlexCoders mailing list and seeing if anybody there has any ideas.

    Peter

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".




February 2008
M T W T F S S
« Jan   Mar »
 123
45678910
11121314151617
18192021222324
2526272829  

Badge Farm

  • Firefox 2
  • Powered by Redoable 1.2
  • Feeds burnt by Feedburner
  • Feed