[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 4706
  • Last Modified:

Sort date functions Actionscript 3 and Macromedia Flex 2

We have a problem in sorting dates within a Flex application data grid

We use php to output dates from a sql 2000 database into xml .
Flex then reads this data but sees it as alphanumeric format and NOT date.

This means we have real problems therefore in sorting dates

Do we have any real gurus out there who could assist one of my programmers with this problem or at least point him in the right direction
0
Chris Michalczuk
Asked:
Chris Michalczuk
  • 4
  • 2
1 Solution
 
julianopolitoCommented:
Are binding these data into ArrayCollection? if so, you can create a sortfunction for this:

Example:
<mx:Script>
	<![CDATA[
	private function resultHandler(e:ResultEvent):void{
					
	myCollection = e.result as ArrayCollection;
	var sortDate:Sort = new Sort();
	//theDateField is the name of the field in the xml where the date is
	//the last parameter is numeric = true, which means to sort numerically
	var sortDateField:SortField = new SortField("theDateField",false,false,true);
	sortDate.fields = [sortDateField]; 
	myCollection.sort = sort;
	myCollection.refresh();
}
]]>
</mx:Script>
<mx:ArrayCollection id="myCollection" />
<mx:HTTPService url="data.php" result="resultHandler(event)"/>

Open in new window

0
 
Chris MichalczukConsultantAuthor Commented:
Thanks for the replay julianopolito,

This is the actual Flex developer.

The above code binds the result to an ArrayCollection and initially sorts the data by the date field as if the user where to click the 'Date' header of the DataGrid control to sort (just looking at the code)?

The problem more specifically is, that if you where to sort on a DataGrid field full of dates... flex see's it as alpha-numeric and doesn't sort it in order of date so I assume there needs to be a sortFunction for the DataGrid to sort dates correctly? I've had a go myself at the sortFunction but doesn't seem to do the job. Any ideas on what the sort function should be?

Cheers
0
 
julianopolitoCommented:
you want to know how to make this compareFunction?
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

 
Chris MichalczukConsultantAuthor Commented:
Yes I want to know how to make the DataGrid.sortFunction so when the user clicks on the date header (ie the column to sort) of the flex datagrid the dates sort correctly.
0
 
julianopolitoCommented:
also about what you asked:
"The above code binds the result to an ArrayCollection and initially sorts the data by the date field as if the user where to click the 'Date' header of the DataGrid control to sort (just looking at the code)?"
Not exactly, this sort function acts numericaly.So if your date comes in a format like YYYYMMDD it will sort correctly. The you can use a DateFormatter object to display the correct date in the grid using a labelFunction for the column.

If this is not the answer to your question, I'm creating the compare function. I just needed to know the format in wich it comes in the xml.
0
 
julianopolitoCommented:
Here it goes. I think the code explains itself. Take a look and tell me if you need more explanation.

The compare function receives objecta and objectb to compare. return 1 if a before b, return -1 if b before a, return 0 if a equals b.

Is that what you where looking for?




//XML file data.xml
<data>
	<item>
		<order>4534</order>
		<date>2007-09-12</date>
	</item>
	<item>
		<order>65456</order>
		<date>2007-09-01</date>
	</item>
	<item>
		<order>34534</order>
		<date>2008-06-23</date>
	</item>
	<item>
		<order>9867</order>
		<date>2007-05-04</date>
	</item>
</data>
 
//MXML app file
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical"
	creationComplete="service.send()">
	<mx:Script>
		<![CDATA[
			import mx.collections.SortField;
			import mx.collections.Sort;
			import mx.rpc.events.ResultEvent;
			private function resultHandler(e:ResultEvent):void{
								
				myCollection = e.result.data.item as ArrayCollection;
				var sortDate:Sort = new Sort();
				sortDate.compareFunction = compareDates;
				myCollection.sort = sortDate;
				myCollection.refresh();
			}
			private function compareDates(a:Object, b:Object, fields:Array=null):int{
				var ds:Array = String(a.date).split("-");
				var date1:Date = new Date(ds[0],ds[1],ds[2]);
				ds = String(b.date).split("-");
				var date2:Date = new Date(ds[0],ds[1],ds[2]);
				var c:int = 0;
				if(date1.getTime() < date2.getTime()){
					c = 1;					
				}
				if(date1.getTime() > date2.getTime()){
					c = -1;
				}
				if(date1.getTime() == date2.getTime()){
					c = 0
				}
				return c;
			}
 
		]]>
	</mx:Script>
<mx:ArrayCollection id="myCollection" />
<mx:HTTPService id="service" url="data.xml" 
	result="resultHandler(event)"/>
	<mx:DataGrid dataProvider="{myCollection}" />
</mx:Application>

Open in new window

0
 
evcrCommented:

This sorts a datagrid by date, I didn't write this function but its worked for me...



//put this in the dbgrid column:
 
<mx:DataGridColumn width="100" headerText="Date" dataField="startdate" sortCompareFunction="sortDate"/>
 
//then use this function:
 
//a custom sort function for dates
//n.b. this sort only works with British date format
//to change to a different format change the regular expression to check for the format you want
//and change the order of the slices
private function sortDate(row1:Object, row2:Object):Number {       
	 var result:Number;
	 var row1Date:String;
	 var row2Date:String;
	 
	 //get the column to sort from the index of the last clicked column
	 var field:String = dgAuctions.columns[clickedColumn].dataField.toString();
	 
	 //define a regular expression that checks for dates in DD/MM/YYYY format
	 var pattern:RegExp = /^((((0?[1-9]|[12]\d|3[01])[\.\-\/](0?[13578]|1[02])[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|[12]\d|30)[\.\-\/](0?[13456789]|1[012])[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|1\d|2[0-8])[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|(29[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00)))|(((0[1-9]|[12]\d|3[01])(0[13578]|1[02])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|[12]\d|30)(0[13456789]|1[012])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|1\d|2[0-8])02((1[6-9]|[2-9]\d)?\d{2}))|(2902((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00))))$/; 
	 
	 /*
	 to sort dates all that is needed is to convert the date to a number
	 that is YYYYMMDD.  The date must be in the format DD/MM/YYYY, e.g. 20/02/2006.
	 There is no need to do a specific number sort as all the converted dates will have
	 the same number of digits, i.e. 8
	 */ 
	 
	 //if the data is not null
	 if(row1[field] != null)
	  //if the data passes the regular expression test then create
	  //the date as YYYYMMDD
	  if(pattern.test(row1[field]))
	   row1Date = row1[field].slice(6) + row1[field].slice(3,5) + row1[field].slice(0,2);
	  else
	   //data is not a valid date so default it to 0
	   row1Date = "0";
	 else
	  //data is empty so default it to 0
	  row1Date = "0";
	 
	 //if the data is not null
	 if(row2[field] != null)
	  //if the data passes the regular expression test then create
	  //the date as YYYYMMDD
	  if(pattern.test(row2[field]))
	  row2Date = row2[field].slice(6) + row2[field].slice(3,5) + row2[field].slice(0,2);
	  else
	  //data is not a valid date so default it to 0
	  row2Date = "0";
	 else
	  //data is empty so default it to 0
	  row2Date = "0";
	
	 /*
	 result = 0 means both dates are the same
	 result = 1 means date 1 is greater than date 2
	 result = -1 means date 2 is greater than date 1
	 */
	 if (row1Date == row2Date)
	  result = 0;
	 else if (row1Date < row2Date)
	  result = -1;
	 else
	  result = 1;
	 
	 return result;
}

Open in new window

0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now