Date Sort in a DataGrid – the easy way

While trying to give suggestions to a post on the Flex Forum, I modified my Simple Data Grid to include a column for a Date. The poster had an issue with sorting the column with dates in it. My guess is, the Date value is actually a String object. It really isn’t very hard to create a Date from a string, just parse out the String and feed the appropriate date times into the Date object. Here is how I create the random date value.

// Create a Random Date
var randomMonth:Number = Math.floor(Math.random() * (11));
var randomDay:Number = Math.floor(Math.random() * (27));
var randomHour:Number = Math.floor(Math.random() * (23));
var randomMinute:Number = Math.floor(Math.random() * (59));
var thisDate:Date = new Date();
thisDate.month = randomMonth;
thisDate.date = randomDay;
thisDate.hours = randomHour;
thisDate.minutes = randomMinute;

Since I insert the value into the item Object as a Date object, the sort function knows how to sort for Descending/Ascending. It might take a few more steps to convert a set of String data into objects and insert them into an ArrayCollection, but I think it saves time in the long run, because you work with each value as what they are and not a String that you have to convert to a Number, Int or Date.

Here is the DataGrid example. Not only does sorting by the column header work for the dates, I added a button to sort by the dates. The button switches between Ascending and Descending each time it is clicked.
View Source

ArrayCollection SortOn before a Sort

I have a display screen that shows a list of items waiting to be acknowledged by technicians. If the page isn’t acknowledged, then the page is escalated up to the next level. The display uses a DataGrid and when the number of items exceeds the displayable rows on the DataGrid, it uses pagination functions to create multiple pages for viewing the other items. When an ArrayCollection is sliced for each page, it causes an issue with sorting. When the data was sorted by level and datetime, it would only sort on the current slice of data, even if I sorted the ArrayCollection before slicing the data. It didn’t seem to matter that I was creating a new ArrayCollection when I was doing the slice, the result was the same, until I figured out the obvious solution.

				acMainArray.source.sortOn(["MessageLevel"], [Array.DESCENDING | Array.NUMERIC]);
				acMainArray.refresh();

				// Sort the Pages based on MessageLevel and PageReceivedDateTime
				acPagnationArray= new ArrayCollection(acMainArray.source);
				
				// Split the main ArrayCollection based on the number of pages and current paging index.
				acPagnationArray= new ArrayCollection(acPagnationArray.source.slice((pagingPageIndex * pagingPageSize),(pagingPageIndex * pagingPageSize) + pagingPageSize));
				acPagnationArray.sort = pageSort;
				acPagnationArray.refresh();

The easy step is to sortOn the original ArrayCollection on the source. Then pass the source into the new ArrayCollection that will be used to create the pages. I do a sort on the sliced ArrayCollection, just to be sure that both the level and DateTime stamp are being sorted. However, I can just do the complete sort on the two items, with a DESCENDING NUMERIC sort on the first and skip the sort after the slice.

acPagingEscalation.source.sortOn(["MessageLevel", "PageReceivedDateTime"], [Array.DESCENDING | Array.NUMERIC, Array.DESCENDING]);
acPagingEscalation.refresh();

It seems that most times in programming, the solution is so simple that you wonder why you didn’t find it earlier.