Sorting by Date in the DataGrid

The DataGrid’s built-in sorting capabilities do not extend to Date objects. The DataGrid can easily sort Strings and Numbers, but it converts Dates to Strings before sorting them – which is not typically what you want to happen.

This article shows you one way to get the best performance sorting Date objects.

Download sample files

Behind the Scenes

The DataGrid’s sort algorithm is a good one. But it works best with numbers, something which can be compared in byte-code in a few instructions. Comparisons between Strings for example, require looking at the length of the Strings, then comparing them character by character until a difference is found.

Dates are represented internally as the number of milliseconds since January 1, 1970. Unfortunately, the DataGrid has no way to extract that information from a Date object, so the Date’s default String representation is used.

A way to circumvent this is to represent the Date information as a Number in the DataGrid’s dataProvider. Beginning with the server-side representation of the data, the information is transferred to the Flex application (using any of the remote data services) as a Number, stored in the DataGrid as a Number, sorted as a Number, and finally displayed as a Date in your choice of format.

Supply and Demand

If your application is supplying the DataGrid from a remote object, send the data not as a formatted String (e.g., “May 17, 2004″ or “17-05-04″), but as pseudo-date number: 20040517. This is simply the 4-digit year, followed by the 2-digit month, followed by the 2-digit day. This number is easily handled by the DataGrid’s sort algorithm.

If you send Dates as pre-formatted Strings with the intention of sorting them as Numbers, you have to convert those Strings into Numbers in ActionScript. Parsing Strings is a slow process, even if you do it when the data arrives in the Flex application. Not only is it slow, you also violate the separation of model from presentation when the data is already in presentation form.

Note: you can send the internal Date representation only if you are using Java on the server-side (using java.util.Date.getTime). This is because only Java stores Dates using the same representation as ActionScript. If you fail to send the correct value, the Dates will appear incorrectly in your Flex application.

With the coded value stored in the DataGrid’s dataProvider, the sort can take place. But the value stored is not what you want someone to see. You need a cell renderer to format the number as a date.

Presentation

The cell renderer can be written in ActionScript or MXML. In the code sample, open PseudoDateRenderer.as to see how the pseudo-date is converted into a Date for display.

Define a DataGridColumn for your DataGrid to associate the cell renderer with the column.

<mx:DataGridColumn columnName=”dateasnumber” headerText=”Date”
cellRenderer=”PseudoDateRenderer” />

You may think that the cell renderer is too complex or that because of the calculations, will take away from any performance gained by the numeric sort. Not true. The cell renderer is applied only to those cells visible. If you have 2000 records in your dataProvider, but are only showing a single column of Dates with only 30 rows visible, then you will have only 30 instances of the cell renderer. The DataGrid has a very clever algorithm for recycling the cell renderer instances as the user scrolls through the data. By setting up a reusable Date (theDate in the cell renderer) and using the setFullYear function, you simply change the date being displayed.

Conclusion

You can make the DataGrid as efficient as possible when it comes to handing Dates if you do a little work on the back end and format the display on the front end. This keeps the presentation of the data separate from the data representation and gives a huge performance boost.