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=";

            import mx.collections.ArrayCollection;
            import mx.collections.Sort;
            import mx.collections.SortField;
            import mx.controls.AdvancedDataGrid;

            private static var UpSortArrow : Class;

            private static var DownSortArrow : Class;

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

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

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

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

                    (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

                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:Text width="100%"
        selectable="false" />

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


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"
    headerRenderer="" />

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.