View Full Version : Ordering by Date in DataGrid

05-04-2004, 12:01 PM
Hi, When ordering by a date field in a datagrid by clicking on the header it always orders as if it were a string, so 1/2/2004, 10/2/2003, 2/12/2003 etc.
How do I get it to order by date?



05-04-2004, 02:55 PM
Normal method is to always have the date as yyyy/mm/dd ie 2004/01/23
No other way as far as I know.

05-04-2004, 04:23 PM
hmmm, that's interesting.... I suppose that would work. Thanks.
Not exactly ideal, but I suppose it gets the job done.

If you think of a way to sort by a normally formatted date I'd love to know.

06-01-2004, 10:05 AM
Here's an example.

You need to add a listener to the column header, and add a hidden column (not hidden here so you can see what's going on) to store the date.getTime()

Place a datagrid on the stage, rename it dgMessages, then paste the following code into frame1. I have been puzzling over this problem for a while, and inspiration hit me about 20 minutes ago!

dgMessages.resizableColumns = true;
dgMessages.columnNames= ["MID", "From", "Sent", "Time" , "Text"]
dgMessages.getColumnAt(0).width = 30;
dgMessages.getColumnAt(1).width = 50;
dgMessages.getColumnAt(2).width = 100;
dgMessages.getColumnAt(3).width = 100;
dgMessages.getColumnAt(4).width = 120;

dgMessages.getColumnAt(2).sortOnHeaderRelease = false;

//this hardcodes in some example data
myDate = new Date();
dgMessages.addItem({MID:1, From:"Susie", Sent:myDate, Time:myDate.getTime(), Text:"1st message"});

myDate = new Date(2004, 5 , 1 , 11 , 10, 2, 44)
dgMessages.addItem({MID:2, From:"Svenni", Sent:myDate, Time:myDate.getTime(), Text:"2nd message"});

myDate = new Date(2004, 4 , 31 , 16 , 14, 33, 44)
dgMessages.addItem({MID:3, From:"Sian", Sent:myDate, Time:myDate.getTime(), Text:"3rd message"});

myDate = new Date(2004, 4 , 29 , 15 , 34, 23, 44)
dgMessages.addItem({MID:4, From:"Ros", Sent:myDate, Time:myDate.getTime(), Text:"4th message"});

myDate = new Date(2004, 5 , 2 , 10 , 16, 33, 44)
dgMessages.addItem({MID:5, From:"Sian", Sent:myDate, Time:myDate.getTime(), Text:"5th message"});

//sorting starts here
var myListener = new Object();
trace("set up listener");

myListener.headerRelease = function(event) {
trace("column " + event.columnIndex + " header was pressed");
switch (event.columnIndex){
case 0:
dgMessages.sortItemsBy("MID", "ASC");
case 1:
dgMessages.sortItemsBy("From", "ASC");
case 2:
dgMessages.sortItemsBy("Time", "ASC");
case 4:
dgMessages.sortItemsBy("Text", "ASC");

dgMessages.addEventListener("headerRelease", myListener);

06-01-2004, 12:15 PM
That did it, I appreciate the help.
Now back to all my old apps to plug it in.... :rolleyes:

09-03-2004, 09:21 AM

I have copied your code into the movie and it only seems to be sorting one way. Also what field are you sorting by when you click on the datafield? I am not sure what is going on in your code above.

Please could you do an example using two fields, one field with the date formatted dd/mm/yyyy and the other as yyyy/mm/dd to order it by. Can you enter the data as string and not funky flash dates.

I would greatly appriecate this as it is a problem we have on our datagrids throughout our site.



09-24-2004, 11:23 AM
sorry about delay in replying, only just saw your post.

To get it to do it both ways, you need to add a boolean to store the last way it was sorted, then your code needs a switch on the boolean to sort ASC or DESC.

In my code I have 2 columns in my datagrid, one containing the date in flash style (which as we have all found out sorts in alphabetical order on day of the week, hmm useful :D ), the other the date in sortable format. The sortable format is set to column width zero for release to the client. Then on clicking at the top of the viewable date column the code actually sorts on the zero width format. Hope that is clear.

Here is the code including the booleans. I'm filling the datagrid using a web service so you'll need to make up your own data for testing.

I have also used this method for e.g. priority where an integer was stored in the database. This was loaded into the datagrid with zero width as tPID, and the multi-language relevant label displayed in the viewed column (tPriority)

//code loading datagrid
for (i=0; i<result.length; i++) {
tID = result.getItemAt(i).id;
tSenderID = result.getItemAt(i).senderId;
tSenderName = result.getItemAt(i).senderName;
tReceiverID = result.getItemAt(i).receiverId;
tMyID = tReceiverID;
tReceiverName = result.getItemAt(i).receiverName;
tMyName = tReceiverName;
tSendDate = result.getItemAt(i).sendDate;
tPID = result.getItemAt(i).priority;
tPriority = arrPriority[_global.langType][tPID];
tMessage = result.getItemAt(i).messageText;
//display date for user as hh:mm dd/mm/yy
tMyDate = funcAddLead(tSendDate.getHours()) + ":" + funcAddLead(tSendDate.getMinutes()) + " " + funcAddLead(tSendDate.getDate()) + "/" + funcAddLead(tSendDate.getMonth()+1) + "/" + funcAddLead(tSendDate.getYear()-100);

var anObject = {MID:tID, SID:tSenderID, From:tSenderName, RID:tReceiverID, To:tReceiverName, Sent:tMyDate, PID: tPID, Priority:tPriority, Text:tMessage, Time: tSendDate.getTime()}

var addedObject = dgMWMessages.addItem(anObject);

then to sort the priority
bSorted = new Array(11); //keeps track of sorting of all 12 columns

//sorting starts here
var myListener = new Object();
trace("set up listener");

myListener.headerRelease = function(event) {
//if they choose date, we want to sort on real date, not string order!
if(dgMWMessages.getColumnAt(event.columnIndex).col umnName == arrMessages[_global.langType][5]){
dgMWMessages.sortItemsBy("Time", || Array.NUMERIC|Array.DESCENDING);
bSorted[event.columnIndex] = false;
} else{
dgMWMessages.sortItemsBy("Time", 0|Array.NUMERIC);
bSorted[event.columnIndex] = true;
//if they choose priority, we want to sort on PID
else if(dgMWMessages.getColumnAt(event.columnIndex).col umnName == arrMessages[_global.langType][8]){
dgMWMessages.sortItemsBy("PID", 0|Array.NUMERIC|Array.DESCENDING);
bSorted[event.columnIndex] = false;
} else{
dgMWMessages.sortItemsBy("PID", 0|Array.NUMERIC);
bSorted[event.columnIndex] = true;
dgMWMessages.sortItemsBy(dgMWMessages.getColumnAt( event.columnIndex).columnName, 0|Array.NUMERIC|Array.DESCENDING);
bSorted[event.columnIndex] = false;
} else{
dgMWMessages.sortItemsBy(dgMWMessages.getColumnAt( event.columnIndex).columnName, 0|Array.NUMERIC);
bSorted[event.columnIndex] = true;
dgMWMessages.addEventListener("headerRelease", myListener);

Hope that helps. Sorry I don't have a less complicated example, bit busy at work at the moment (understatement of the year!!!!) trying to do things not humanly possible but what the heck.