Flex 3: SortCompareFunction (Sort Compare Function) – Sort a DataGrid Column by Numeric Value, Date and Time

This Flex 3 example shows you how to use the sort compare function on a data grid to sort numeric, date and time values within a flex 3 data grid.

This example also provides re-usable functions which do the actual comparison of the date, time and numeric values

We hope this example will make it easy for you to sort a flex 3 data grid column with ease.

<pre>
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			public var data:ArrayCollection = new ArrayCollection([
				{first: "John", last: "Doe", age: 21, dob: '16/12/1990', tob: '16:49'},
				{first: "Jane", last: "Doe", age: 22, dob: '18/04/1989', tob: '03:15'},
				{first: "James", last: "Doe", age: 24, dob: '02/03/1987', tob: '10:32'},
			]);

		public function numSort(field:String):Function {
			return function (obj1:Object, obj2:Object):int {
				var num:Number = ((Number)(obj1[field]) - (Number)(obj2[field]));
				return (num > 0) ? 1 : ((num < 0) ? -1 : 0);
			}
		}

		public function dateSort(field:String):Function {
			return function (obj1:Object, obj2:Object):int {

				//Convert the object to a string
				var dStr1:String = String(obj1[field]);
				var dStr2:String = String(obj2[field]);

				//Split the date string into an array
				var dArr1:Array = dStr1.split("/");
				var dArr2:Array = dStr2.split("/");

				var dateA:Date;
				//Convert the array elements to a Date in format DD/MM/YYYY ? (HH:MM)
				if(dArr1[2].toString().length > 4) {
					//Element must have a time attached e.g. 2011 10:00
					//Split on the " "
					var dtArr1:Array = dArr1[2].toString().split(" ");
					var tString1:String = dtArr1[1]; // 2011 [10:00]
					//Split the time string on ":"
					var tArr1:Array = tString1.split(":");
					//			     Years		Months    Days      Hours     Minutes
					dateA = new Date(dtArr1[0], dArr1[1], dArr1[0], tArr1[0], tArr1[1]);
				} else {
					//No time attached
					//				 Years		Months    Days
					dateA = new Date(dArr1[2], dArr1[1], dArr1[0]);
				}

				var dateB:Date;
				//Convert the array elements to a Date in format DD/MM/YYYY ? (HH:MM)
				if(dArr2[2].toString().length > 4) {
					//Element must have a time attached e.g. 2011 10:00
					//Split on the " "
					var dtArr2:Array = dArr2[2].toString().split(" ");
					var tString2:String = dtArr2[1]; // 2011 [10:00]
					//Split the time string on ":"
					var tArr2:Array = tString2.split(":");
					//				Years		Months    Days      Hours     Minutes
					dateB = new Date(dtArr2[0], dArr2[1], dArr2[0], tArr2[0], tArr2[1]);
					//Alert.show("YEARS: " + dArr2[2] + " MONTHS: " + dArr2[1] + " DAYS: " + dArr2[0] + " HOURS: " + tArr2[0] + " SECONDS: " + tArr2[1]);
				} else {
					//No time attached
					//				Years		Months    Days
					dateB = new Date(dArr2[2], dArr2[1], dArr2[0]);
				}
				//Compate and return int
				return ObjectUtil.dateCompare(dateA, dateB);
			}
		}

		public function timeSort(field:String):Function {
			return function (obj1:Object, obj2:Object):int {

				var timeA:Date = new Date();
				var timeS:String = obj1[field];
				var tarr:Array = timeS.split(":");
				timeA.setHours(tarr[0], tarr[1]);

				var timeB:Date = new Date();
				var timeS:String = obj2[field];
				var tarr:Array = timeS.split(":");
				timeB.setHours(tarr[0], tarr[1]);

				return ObjectUtil.dateCompare(timeA, timeB);
			}
		}
		]]>
	</mx:Script>
	<mx:DataGrid dataProvider="{data}" width="100%" headerBackgroundSkin="100%">
		<mx:columns>
			<mx:DataGridColumn headerText="First Name" dataField="first" />
			<mx:DataGridColumn headerText="Last Name" dataField="last" />
			<mx:DataGridColumn headerText="Age" dataField="age" sortCompareFunction="numSort" />
			<mx:DataGridColumn headerText="Date of Birth" dataField="dob"  sortCompareFunction="dateSort" />
			<mx:DataGridColumn headerText="Time of Birth" dataField="time"  sortCompareFunction="timeSort" />
		</mx:columns>
	</mx:DataGrid>
</mx:Application>
</pre>