Determining a DataGridColumn object’s current sort order

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>

6 thoughts on “Determining a DataGridColumn object’s current sort order

  1. 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));
    }

Comments are closed.