Sorting Date fields in a DataGrid in the Flex Framework

I was working on some new mini chart apps over the weekend for the MXNA reports section, and had a DataGrid that contained dates. I wanted to allow the user to sort the datagrid by the DateField, but by default the DataGrid sorts dates with a string compare (calling toString on the Date instance).

I tried to set up a custom sort function for the DataGridColumn instance that contained the dates, but because I was using a custom label format function for the column, Flex passed the labels to me, and not the data items (which would allow me to get access to the Date instance). Because of this, I couldn’t sort on the date.

There is an example on Macromedia.com that shows how to sort by dates, but it requires that you override and implement all sorting for the DataGrid (something which seemed unecessary and overkill to me). Peter Ent also posted an example, but it required massaging the data on the server first, something which was not an option for me since I was using a public web service API.

So, after much trial and error, and help from Matt Chotin, I finally got it working, and figured I would post it here.

Basically, I listen for the headerRelease event for the DataGrid. If it is in response to the date column being clicked, then I sort the dataprovider that the DataGrid is hooked up to (otherwise, I do nothing, and let the DataGrid do the sorting).

Here is an example:

Here is the Code:

———-DateSortExample.mxml———-

[code][/code]

—————————————-

———-DateSortExample.as———-

[code]private var dp:Array;private var sortOrder:Number = 1;private function initTag():Void{//listend for the headerRelease event on the datagrid, which is broadcast//when any of the column headers are clicked.dg.addEventListener(“headerRelease”,mx.utils.Delegate.create(this, onDateHeaderRelease));dp = new Array();//pupulate the date grid with some data.var item:Object;var randomDay:Number;var randomMonth:Number;for(var i:Number = 0; i d2ms){return -1;}else if(d1ms < d2ms){return 1;}else{return 0;}}//compares the datesprivate function dateFieldCompare(item1:Object, item2:Object, bit:Number):Number{//determine which way the column should be sorted (ASC or DESCvar toggle:Number = (bit == Array.DESCENDING)? 1 : -1;//call compare date function, and then toggle the sort directionreturn toggle * compareDates(item1.date,item2.date);}//called when any of the datagrids column headings are clickedprivate function onDateHeaderRelease(eventObj:Object):Void{//Only sort if the Date column head was clickedif(eventObj.columnIndex == 2){//sort the dataProvider directly, passing the function to do the sort//and a bit indicating whether to sort ascending or descendingdp.sortItems(dateFieldCompare, ((sortOrder == 1)? 0: Array.DESCENDING));//reverse the sort order so the next time the column is clicked, it is//sorted in the reverse ordersortOrder *= -1;}}[/code]

—————————————-

You can download the source from here (or right click on the example).

Creative Commons License
This work is licensed under a Creative Commons License.

<!—->