Here’s an example of sorting a column of dates in a Flex DataGrid. The dates start out as Strings (such as “04/14/1980″) so you create a custom sortCompareFunction on that DataGrid column which converts the strings to dates so Flex will sort the dates in sequential order (as oppsed to string order). Hope that helps somebody out there.
I also created a little tooltip on the date column which shows the dates in a somewhat more readable form (”April 14 1980″) using the DataGridColumn object’s showDataTips and dataTipFunction properties.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/12/sorting-date-columns-in-a-datagrid/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.utils.ObjectUtil;
private function date_sortCompareFunc(itemA:Object, itemB:Object):int {
/* Date.parse() returns an int, but
ObjectUtil.dateCompare() expects two
Date objects, so convert String to
int to Date. */
var dateA:Date = new Date(Date.parse(itemA.dob));
var dateB:Date = new Date(Date.parse(itemB.dob));
return ObjectUtil.dateCompare(dateA, dateB);
}
private function date_dataTipFunc(item:Object):String {
return dateFormatter.format(item.dob);
}
]]>
</mx:Script>
<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object name="User A" dob="04/14/1980" />
<mx:Object name="User B" dob="01/02/1975" />
<mx:Object name="User C" dob="12/30/1977" />
<mx:Object name="User D" dob="10/27/1968" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>
<mx:DateFormatter id="dateFormatter" formatString="MMMM D, YYYY" />
<mx:DataGrid id="dataGrid" dataProvider="{arrColl}">
<mx:columns>
<mx:DataGridColumn dataField="name"
headerText="Name:" />
<mx:DataGridColumn dataField="dob"
headerText="Date of birth:"
sortCompareFunction="date_sortCompareFunc"
showDataTips="true"
dataTipFunction="date_dataTipFunc" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
View source is enabled in the following example.
I don’t quite see why the dates are strings in your data, why not use date objects to start with?
Anyway, if you want you can sort the int’s returned by Date.parse like this:
private function dateComparator( itemA : Object, itemB : Object ) : int { var a : int = Date.parse(itemA.dob); var b : int = Date.parse(itemB.dob); return (b - a)/Math.abs(b - a); }Theo,
The dates were strings instead of date objects, well, for no real reason. If they were dates to begin with, I believe they would have sorted properly without any additional code being needed. Although, if you were getting the data from an XML document or something else, its likely they would have imported as Strings.
Also, looking again at the ObjectUtil documentation, it looks like I could have skipped converting to dates and used the
ObjectUtil.numericCompare()method, or your code works great too.Good tip, thanks.
No, dates aren’t sorted right by default. I’ve tried a few times and it always surprises me that DataGrid doesn’t support it by default, it’s such an obvious feature.
I’m not sure why but they end up ordered in a way that looks quite random to me. I can imagine that they are ordered either by their toString value or some other date string format that doesn’t support ordering.
I like to keep my dates in the database as YYYY-MM-DD, this way they sort without help. Then all you need is a labelFunction to display them as you like them.
how do u make this sort function generic i.e if you have many numeric columns in a datagrid, do you need to write a comparator function for each column?
sm,
Not sure if there is a better way, but this was the first idea that came to mind. Surprisingly, it seems to work, based on my approximate 90 seconds of testing.
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ import mx.utils.ObjectUtil; private var col:String; private function numericSort(itemA:Object, itemB:Object):int { return ObjectUtil.numericCompare(itemA[col], itemB[col]); } ]]> </mx:Script> <mx:Array id="arr"> <mx:Object name="one" col1="1" col2="0.59" col3="1.5" col4="40" /> <mx:Object name="two" col1="2" col2="0.32" col3="1.1" col4="-12" /> <mx:Object name="three" col1="3" col2="0.82" col3="2.9" col4="22" /> <mx:Object name="four" col1="4" col2="0.29" col3="-0.2" col4="25" /> <mx:Object name="five" col1="5" col2="0.33" col3="5.0" col4="37" /> <mx:Object name="six" col1="6" col2="0.51" col3="-2.3" col4="-11" /> <mx:Object name="seven" col1="7" col2="0.70" col3="4.1" col4="-9" /> </mx:Array> <mx:DataGrid id="dataGrid" dataProvider="{arr}" headerRelease="col = dataGrid.columns[event.columnIndex].dataField;"> <mx:columns> <mx:DataGridColumn dataField="name" /> <mx:DataGridColumn dataField="col1" sortCompareFunction="numericSort" /> <mx:DataGridColumn dataField="col2" sortCompareFunction="numericSort" /> <mx:DataGridColumn dataField="col3" sortCompareFunction="numericSort" /> <mx:DataGridColumn dataField="col4" sortCompareFunction="numericSort" /> </mx:columns> </mx:DataGrid> </mx:Application>Hope that helps,
Peter
Thanks Peter!Actually I have a datagrid that is getting generated dynamically using actionscript. The sortcomparefunction seems to work when i put it in the mxml tag but when i try using it in actionscript it fails!
eg if i do
in the mx:Script tags
sm,
Does the following work for you? Note that I have a slight “workaround” where I’m storing the currently selected header by listening for the data grid control’s
headerReleaseevent.<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Script> <![CDATA[ import mx.events.DataGridEvent; import mx.controls.dataGridClasses.DataGridColumn; import mx.controls.DataGrid; import mx.utils.ObjectUtil; private var dataGrid:DataGrid; private var col:String; private function init():void { /* name column */ var nameCol:DataGridColumn = new DataGridColumn("name"); /* col1 column */ var col1Col:DataGridColumn = new DataGridColumn("col1"); col1Col.sortCompareFunction = numericSort; /* col2 column */ var col2Col:DataGridColumn = new DataGridColumn("col2"); col2Col.sortCompareFunction = numericSort; /* col3 column */ var col3Col:DataGridColumn = new DataGridColumn("col3"); col3Col.sortCompareFunction = numericSort; /* col4 column */ var col4Col:DataGridColumn = new DataGridColumn("col4"); col4Col.sortCompareFunction = numericSort; var cols:Array = []; cols.push(nameCol); cols.push(col1Col); cols.push(col2Col); cols.push(col3Col); cols.push(col4Col); dataGrid = new DataGrid(); dataGrid.dataProvider = arr; dataGrid.columns = cols; dataGrid.addEventListener(DataGridEvent.HEADER_RELEASE, dataGrid_headerRelease); addChild(dataGrid); } private function dataGrid_headerRelease(evt:DataGridEvent):void { col = dataGrid.columns[evt.columnIndex].dataField; } private function numericSort(itemA:Object, itemB:Object):int { return ObjectUtil.numericCompare(itemA[col], itemB[col]); } ]]> </mx:Script> <mx:Array id="arr"> <mx:Object name="one" col1="1" col2="0.59" col3="1.5" col4="40" /> <mx:Object name="two" col1="2" col2="0.32" col3="1.1" col4="-12" /> <mx:Object name="three" col1="3" col2="0.82" col3="2.9" col4="22" /> <mx:Object name="four" col1="4" col2="0.29" col3="-0.2" col4="25" /> <mx:Object name="five" col1="5" col2="0.33" col3="5.0" col4="37" /> <mx:Object name="six" col1="6" col2="0.51" col3="-2.3" col4="-11" /> <mx:Object name="seven" col1="7" col2="0.70" col3="4.1" col4="-9" /> </mx:Array> </mx:Application>Thanks a million Peter!!!u r a godsend!!that did work..i have been stuck on it fr 3 days and with such little examples on dynamic grids available online your help really meant a lot to me!!!
Glad I could help. I also highly recommend subscribing to the FlexCoders mailing list, if you haven’t already. (see http://flex.org/community/#mailinglists for links and details on various Flex-related mailing lists)
At over 7650 members, it is quite an active and informative list. Although one word of warning, it can get very busy (~3000 posts a month), so make sure you set up the appropriate filters otherwise your inbox can get a bit overwhelmed.
Happy Flexing!
Peter
Thanks. I definitely need a lot of information with Flex and m going to join this community right away!
Thanks for the post. It is useful as the data I get from a webservice is in the form of string as u used.
This is super useful code dude :)