Determining a DataGridColumn object’s current sort order

by Peter deHaan on August 23, 2007

in DataGrid, DataGridColumn

OK, I’m convinced there is a better way to do this, but so far this is the only solution I’ve found…
Any other ideas? Leave em in the comments!

Basically the following post shows one possible way of determining the current sort order of a data grid by grabbing the sortDescending property whenever a user presses on a data grid header.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/23/determining-a-datagridcolumn-objects-current-sort-order/ -->
<mx:Application name="DataGridColumn_sortDescending_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

            private function doHeaderRelease(evt:DataGridEvent):void {
                var column:DataGridColumn = DataGridColumn(evt.currentTarget.columns[evt.columnIndex]);
                DataGrid(evt.currentTarget).callLater(onCallLater, [column]);
            }

            private function onCallLater(column:DataGridColumn):void {
                columnSortDescending.text = column.dataField + ".sortDescending: " + column.sortDescending;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label id="columnSortDescending" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            rowCount="4"
            headerRelease="doHeaderRelease(event)">
        <mx:columns>
            <mx:DataGridColumn id="col1" dataField="label" />
            <mx:DataGridColumn id="col2" dataField="data" />
        </mx:columns>
        <mx:dataProvider>
            <mx:Array>
                <mx:Object data="one" label="User 1" />
                <mx:Object data="two" label="User 2" />
            </mx:Array>
        </mx:dataProvider>
    </mx:DataGrid>

</mx:Application>

View source is enabled in the following example.

April 9, 2009: Actually, here is a much better approach, suggested by my co-worker, and Flex hero, Alex Harui:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/23/determining-a-datagridcolumn-objects-current-sort-order/ -->
<mx:Application name="DataGrid_dataProvider_sort_test"
        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 {
                try {
                    var s:SortField = Sort(dataGrid.dataProvider.sort).fields[0];
                    lbl.text = "name:" + s.name + ", descending:" + s.descending;
                    lbl.setStyle("color", "black");
                } catch (err:*) {
                    lbl.text = "unsorted";
                    lbl.setStyle("color", "red");
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="btn" label="Get sort" click="init();" />
        <mx:Label id="lbl" fontWeight="bold" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid">
        <mx:dataProvider>
            <mx:Array>
                <mx:Object c1="1.One" c2="1.Two" />
                <mx:Object c1="2.One" c2="2.Two" />
                <mx:Object c1="3.One" c2="3.Two" />
                <mx:Object c1="4.One" c2="4.Two" />
                <mx:Object c1="5.One" c2="5.Two" />
                <mx:Object c1="6.One" c2="6.Two" />
                <mx:Object c1="7.One" c2="7.Two" />
                <mx:Object c1="8.One" c2="8.Two" />
            </mx:Array>
        </mx:dataProvider>
    </mx:DataGrid>

</mx:Application>

{ 4 comments… read them below or add one }

1 Dan April 28, 2008 at 12:46 pm

I think this would work and you do not have to make a callLater method…..

private function doHeaderRelease(event:DataGridEvent):void {
var dg:DataGrid= event.currentTarget as DataGrid;

trace(“column: ” + String(event.dataField));
trace(“descending: ” + String(dg.columns[event.columnIndex].sortDescending));
}

Reply

2 Matt September 10, 2008 at 11:55 am

Dan -

Turns out doing it that way cause inaccuracies, for some reason sortDecending will report false too often. Checkout this post:

http://blog.flexexamples.com/2007/08/31/toggling-sortable-columns-in-a-flex-datagrid-control/#comment-4653

Reply

3 vidya November 4, 2009 at 6:53 am

good coding…n useful too

Reply

4 Ani November 23, 2009 at 12:58 pm

I was facing the problem as mentioned in the other post.
This callLater way was helpfull.
Thanks,
Anil

Reply

Leave a Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree

Previous post:

Next post: