The random utterances of David Arno

In a recent post, I highlighted the arse-about-face nature of the way sorting works with the Flex DataGrid component. As one comment put it, it is synonymous with moving your car wheels to set the steering wheel position.

In response to that, I have created a simple extension to the DataGrid component. It is called AutoSortDataGrid and it adds two properties to DataGrid: sortColumn and sortDirection. These simple additions enable one to specify the initial sort state of a datagrid, and no additional code is required on the user’s part.

Building on the examples used in the previous post, to create a table with the colour data previous used, that sorts in a descending fashion on the red column, use the following code:

<gf:AutoSortDataGrid sortColumn="{red}" sortDescending="true" 
                              height="157">
  <gf:columns>
    <mx:DataGridColumn headerText="Colour" dataField="name"/>
    <mx:DataGridColumn id="red" headerText="Red" dataField="red"
                                sortCompareFunction="sortRed"/>
    <mx:DataGridColumn headerText="Green" dataField="green"/>
    <mx:DataGridColumn headerText="Blue" dataField="blue" />
  </gf:columns>
  <gf:dataProvider>
    <mx:Object name="Red" red="255" green="0" blue="0" />
    <mx:Object name="Green" red="0" green="255" blue="0" />
    <mx:Object name="Blue" red="0" green="0" blue="255" />
    <mx:Object name="Yellow" red="255" green="255" blue="0" />
    <mx:Object name="Magenta" red="255" green="0" blue="255" />
    <mx:Object name="Cyan" red="0" green="255" blue="255" />
    <mx:Object name="White" red="255" green="255" blue="255" />
    <mx:Object name="Black" red="0" green="0" blue="0" />
  </gf:dataProvider>
</gf:AutoSortDataGrid>

The component supports both the data being supplied via the MXML and via ActionScript, and the properties can be both set in the MXML or in ActionScript. The following SWF illustrates this in practice. The first table is pure MXML, the second sets the data via ActionScript and the third sets both the properties and data via ActionScript.

Resources:
The AutoSortDataGrid SWC, source and documentation.

The AutoSortDataGrid SWC, source and documentation, plus the source for the test SWF displayed above.

An on-line copy of the documentation.