This is a bit of code for a custom header renderer that’ll allow you to toggle ascending and descending sorts on a data grid.

Here’s the code for the renderer:

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml&quot;
    horizontalScrollPolicy="off"
    verticalScrollPolicy="off"
    creationComplete="onCreationComplete()"
    click="onClick()">

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

            [Embed(source="/css/assets/sort_arrow_up.png")]
            private static var UpSortArrow : Class;

            [Embed(source="/css/assets/sort_arrow_down.png")]
            private static var DownSortArrow : Class;

            private static var renderers : EventDispatcher =
                new EventDispatcher ();
            private var ignoreSortArrowUpdate : Boolean;

            private function onCreationComplete () : void
            {
                renderers.addEventListener ("sortArrowUpdated",
                    onSortArrowUpdated);

                // pick a column to sort by default
                if (data && data.dataField == "dataField")
                {
                    updateSortArrow (true);
                    sortColumn ();
                }
            }

            private function onClick () : void
            {
                updateSortArrow (true);
                ignoreSortArrowUpdate = true;

                renderers.dispatchEvent
                    (new Event ("sortArrowUpdated"));

                sortColumn ();
            }

            private function onSortArrowUpdated (event : Event) : void
            {
                if (! ignoreSortArrowUpdate)
                {
                    updateSortArrow (false);
                }

                ignoreSortArrowUpdate = false;
            }

            private function updateSortArrow (selected : Boolean)
                : void
            {
                sortArrow.source = (selected ? (sortArrow.source ==
                    DownSortArrow ? UpSortArrow : DownSortArrow)
                    : null);
            }

            private function sortColumn () : void
            {
                var dataProvider : ArrayCollection =
                    (this.owner as AdvancedDataGrid).dataProvider as
                    ArrayCollection;

                dataProvider.sort = new Sort ();
                dataProvider.sort.fields = [new SortField
                    (data.dataField, false, sortDescending)];

                dataProvider.refresh ();
            }

            private function get sortDescending () : Boolean
            {
                return (sortArrow.source == DownSortArrow);
            }

        ]]>
    </mx:Script>

    <mx:Text width="100%"
        text="{data.headerText}"
        textAlign="center"
        selectable="false" />

    <mx:Image id="sortArrow"
        right="0"
        bottom="0" />

</mx:Canvas>


When you click on a column header, not only will it toggle the appropriate sort, it will update the sort icon, and dispatch an event so the other columns know to hide their sort icons.

Finally, here’s how to set up your data grid to use the custom renderer:

<mx:AdvancedDataGrid id="grid"
    sortableColumns="false"
    headerRenderer="com.company.app.view.ToggleSortHeaderRenderer" />


It may seem counterintuitive to set sortableColumns to false on the data grid, but you don’t want Flex messing things up by also trying to sort the columns. Let the custom renderer do all the heavy lifting here.

You’ll also need to specify the sort icons (up and down arrows) and set the column that you’d like to be sorted by default.