Flex: How to specify DataGrid sortFunction and disable default sortFunction

 

Requirements:

    1. Set the first column of the data grid to be checkbox, indicating we can select one or more specific rows.

    2. Once we clicked the header, then the data grid can be sorted by the clicked column, if there are same item in this column indicating that returns 0, we use the id column which is identical as the secondary sort strategy.

    3. Pay attention to the jump bug if we sort by a specific column which have the same value.

 

1. Value Object

package vo
{
	
	public class FlatFileUploadVo
	{
		public var id:int;
		public var isUpload:Boolean;
   	 	public var feedName:String;
   	 	public var reqBy:String;
   	 	   	 	
		public function FlatFileUploadVo()
		{
		}
	}
}

 

2. The item renderer for the first column as check box

 

package components
{
	import com.flexicious.controls.CheckBox;
	
	import flash.events.MouseEvent;
	
	import mx.controls.Alert;
	
	import vo.FlatFileUploadVo;

	public class CheckBoxColumnRenderer extends CheckBox
	{
		public function CheckBoxColumnRenderer()
		{
		}
		
		override public function set data(value:Object):void
		{
			super.data = value;					//This line is important! Internally set data to the value passed in.
			
			var isUpload:Boolean = value.isUpload;
			if(true == isUpload)
			{
				selected = true;
			}
			else
			{
				selected = false;
			}
		}
		
		override protected function clickHandler(event:MouseEvent):void
		{
			var selectedCheckBox:CheckBoxColumnRenderer = event.currentTarget as CheckBoxColumnRenderer;
			
			(selectedCheckBox.data as FlatFileUploadVo).isUpload = !(selectedCheckBox.data as FlatFileUploadVo).isUpload;
			selectedCheckBox.selected = !selectedCheckBox.selected;
		}
	}
}

 

3. The main application (I am using with flexicious)

 

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   xmlns:columns="com.flexicious.grids.columns.*"
			   minWidth="955" minHeight="600" xmlns:grids="com.flexicious.grids.*"
			   creationComplete="onComplete(event)"
			   >
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.collections.ISort;
			import mx.collections.Sort;
			import mx.collections.SortField;
			import mx.controls.Alert;
			import mx.events.DataGridEvent;
			import mx.messaging.channels.StreamingAMFChannel;
			
			import vo.FlatFileUploadVo;
			
			[Bindable]
			public var queList:ArrayCollection = new ArrayCollection();
			private var sortA:ISort;
			private var sortByFeedName:SortField = new SortField("feedName", false, true);
			private var sortById:SortField = new SortField("id", false, false);
			private var sortByReqBy:SortField = new SortField("reqBy", false, false);
			private var flatFile:FlatFileUploadVo;
			
			private function onComplete(event:Event):void
			{
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = false;
				flatFile.feedName = "feedName01";
				flatFile.reqBy = "system";
				flatFile.id = 1;
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = true;
				flatFile.feedName = "feedName02";
				flatFile.reqBy = "system";
				flatFile.id = 2;
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = true;
				flatFile.feedName = "feedName03";
				flatFile.reqBy = "system";
				flatFile.id = 3;
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = true;
				flatFile.feedName = "feedName04";
				flatFile.reqBy = "system";
				flatFile.id = 4;
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = false;
				flatFile.feedName = "feedName05";
				flatFile.reqBy = "system";
				flatFile.id = 5;
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = false;
				flatFile.feedName = "feedName06";
				flatFile.reqBy = "system";
				flatFile.id = 6;
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = false;
				flatFile.feedName = "feedName07";
				flatFile.reqBy = "system";
				flatFile.id = 7;
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = false;
				flatFile.feedName = "feedName08";
				flatFile.reqBy = "system";
				flatFile.id = 8;
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = false;
				flatFile.feedName = "feedName09";
				flatFile.reqBy = "system";
				flatFile.id = 9;
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = true;
				flatFile.feedName = "feedName10";
				flatFile.reqBy = "system";
				flatFile.id = 10;
				queList.addItem(flatFile);
				
				flatFile = new FlatFileUploadVo();
				flatFile.isUpload = true;
				flatFile.feedName = "feedName02";
				flatFile.reqBy = "system";
				flatFile.id = 11;
				queList.addItem(flatFile);
				
				sortA = new Sort();
				sortA.fields = [sortByFeedName, sortById];
				
				queList.sort = sortA;
				queList.refresh();
			}
			private function feedNameSortCompareFunction(itemA:FlatFileUploadVo, itemB:FlatFileUploadVo):int
			{
				if(itemA.feedName > itemB.feedName)
				{
					return 1;
				}
				else if(itemA.feedName < itemB.feedName)
				{
					return -1;
				}
				else
				{
					return idSortCompareFunction(itemA, itemB);
				}
			}
			private function reqestBySortCompareFunction(itemA:FlatFileUploadVo, itemB:FlatFileUploadVo):int
			{
				if(itemA.reqBy > itemB.reqBy)
				{
					return 1;
				}
				else if(itemA.reqBy < itemB.reqBy)
				{
					return -1;
				}
				else
				{
					return idSortCompareFunction(itemA, itemB);
				}
			}
//			private function onHeaderRelease(event:DataGridEvent):void
//			{
//				if(event.columnIndex == 2)
//				{
//					sortA.fields[0] = sortByFeedName;
//					sortA.fields[1] = sortById;
//					Alert.show("Sort by feedName");
//				}
//				else if(event.columnIndex == 3)
//				{
//					//sortA.fields[0] = sortByReqBy;
//					sortA.fields[0] = sortById;
//					sortA.fields[1] = sortByFeedName;
//					Alert.show("Sort by reqBy");
//				}
//				
//				queList.sort = sortA;
//				queList.refresh();
//				
//				event.preventDefault();
//				Alert.show("Sort by reqBy end");
//			}
			
			// id is identical, so we can be sure that no two rows' id will be the same
			private function idSortCompareFunction(obj1:Object, obj2:Object):int
			{
				if(obj1.id > obj2.id)
				{
					return 1;
				}
				else
				{
					return -1;
				}
			}

		]]>
	</fx:Script>
	
	<grids:ExtendedDataGrid dataProvider="{queList}" width="400">
		<grids:columns>
			<columns:ExtendedDataGridColumn headerText="Initiate?" sortable="false" editable="false" dataField="isUpload" itemRenderer="components.CheckBoxColumnRenderer"/>
			<columns:ExtendedDataGridColumn headerText="ID" sortable="false" editable="false" dataField="id" width="8"/>
			<columns:ExtendedDataGridColumn headerText="Feed Name" sortCompareFunction="feedNameSortCompareFunction" sortable="true" editable="false" textAlign="left" dataField="feedName" width="100"/>
			<columns:ExtendedDataGridColumn headerText="Request By" sortCompareFunction="reqestBySortCompareFunction" sortable="true"  editable="false" textAlign="left" dataField="reqBy" width="100"/>
		</grids:columns>
	</grids:ExtendedDataGrid>
	
</s:Application>

 

 

Problems:

    1. Still have some problems in code refractor: How to define only one compare function to make the code cleaner?

    2. As we can see from the comment, the headerRelease function doesn't work and the reason is still unknown.