Flex: How to customize header renderer and column renderer for DataGrid?

1. Main Application

<?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" 
			   preinitialize="init();"
			   minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Metadata>
	</fx:Metadata>
	<fx:Script>
		<![CDATA[
			import components.CheckBoxColumnRenderer;
			
			import event.CheckBoxHeaderSelectedEvent;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			
			import vo.Student;
			[Bindable]
			private var studentList:ArrayCollection = new ArrayCollection();
			
			private function init():void
			{
				var student:Student = new Student(true, true, 1, "Davy", "Male");
				studentList.addItem(student);
				
				student = new Student(true, true, 2, "Caly", "Female");
				studentList.addItem(student);
				
				student = new Student(true, true, 3, "Caly", "Male");
				studentList.addItem(student);
				
				student = new Student(true, true, 3, "Caly", "Male");
				studentList.addItem(student);
			}
			
			private function assignListeners():void
			{
//				Alert.show("Assigned");
				dataGrid.addEventListener(CheckBoxHeaderSelectedEvent.COLUMN_SELECTED, checkBoxHeaderSelectedHandler);
				dataGrid.addEventListener(CheckBoxHeaderSelectedEvent.COLUMN_DESELECTED, checkBoxHeaderSelectedHandler);
			}
			private function checkBoxHeaderSelectedHandler(e:Event):void
			{
//				Alert.show("Clicked");
				var student:Student;
				if(CheckBoxHeaderSelectedEvent.COLUMN_DESELECTED == e.type)
				{
//					Alert.show("DeSelect All Selected");
					for each(student in studentList)
					{
						if(true == student.enabled)
						{
							student.selected = false;
						}
					}
				}
				else
				{
//					Alert.show("Select All Selected");
					for each(student in studentList)
					{
						if(true == student.enabled)
						{
							student.selected = true;
						}
					}
				}
				studentList.refresh();
			}
		]]>
	</fx:Script>
	
	<mx:DataGrid id="dataGrid" dataProvider="{studentList}" creationComplete="assignListeners();">
		<mx:columns>
			<mx:DataGridColumn dataField="selected"
							   headerRenderer="components.CheckBoxHeaderRenderer" itemRenderer="components.CheckBoxColumnRenderer"
							   sortable="false"/>
			<mx:DataGridColumn headerText="Id" dataField="id"/>
			<mx:DataGridColumn headerText="Name" dataField="name"/>
			<mx:DataGridColumn headerText="Gender" dataField="gender"/>
		</mx:columns>
	</mx:DataGrid>
	
</s:Application>

 

2. Header Renderer

package components
{
	import com.flexicious.controls.CheckBox;
	
	import event.CheckBoxHeaderSelectedEvent;
	
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import mx.containers.Canvas;
	import mx.controls.Alert;
	import mx.controls.listClasses.IListItemRenderer;

	public class CheckBoxHeaderRenderer extends Canvas implements IListItemRenderer
	{
		private var selector:CheckBox;
		public function CheckBoxHeaderRenderer()
		{
		}
		
		override protected function createChildren():void
		{
			super.createChildren();
			this.selector = new CheckBox();
			this.selector.x = 5;
			this.addChild(this.selector);
			
			this.addEventListener(MouseEvent.CLICK, dispatchHeaderSelected);
		}
		private function dispatchHeaderSelected(event:Event):void
		{
//			Alert.show("dispatchHeaderSelected");
			var e:CheckBoxHeaderSelectedEvent;
			if(true == selector.selected)
			{
				e = new CheckBoxHeaderSelectedEvent(CheckBoxHeaderSelectedEvent.COLUMN_SELECTED);
			}
			else
			{
				e = new CheckBoxHeaderSelectedEvent(CheckBoxHeaderSelectedEvent.COLUMN_DESELECTED);
			}
			this.owner.dispatchEvent(e);
		}
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			this.selector.setActualSize(this.selector.getExplicitOrMeasuredWidth(), this.selector.getExplicitOrMeasuredHeight());
		}
	}
}

 

3. Column Renderer

package components
{
	import com.flexicious.controls.CheckBox;
	
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	import mx.containers.Canvas;
	import mx.controls.Alert;
	import mx.controls.listClasses.IListItemRenderer;

	public class CheckBoxColumnRenderer extends Canvas implements IListItemRenderer
	{
		private var checkBox:CheckBox;
		
		override public function set data(value:Object):void
		{
			super.data = value;
			
			var stuSelected:Boolean = value.selected;
			var stuEnabled:Boolean = value.enabled;
//			Alert.show("value: " + value.name +  ", Enabled: " + stuEnabled);
			if(false == stuEnabled)
			{
				checkBox.enabled = false;
				checkBox.selected = false;
			}else
			{
				checkBox.enabled = true;
			
				if(true == stuSelected)
				{
					checkBox.selected = true;
				}else
				{
					checkBox.selected = false;
				}
			}
		}
		override protected function createChildren():void
		{
			super.createChildren();
			this.checkBox = new CheckBox;
			
			this.addChild(checkBox);
			this.addEventListener(MouseEvent.CLICK, itemSelected);
		}
		private function itemSelected(event:Event):void
		{
			var selectedCheckBox:CheckBox = event.target as CheckBox;
			
			if(true == selectedCheckBox.enabled)
			{
				this.data.selected = !this.data.selected;
				checkBox.selected = !checkBox.selected;
			}
		}
	}
}

 

4. Vo

package vo
{
	[Bindable]
	public class Student
	{
		public var selected:Boolean;
		public var enabled:Boolean;
		public var id:int;
		public var name:String;
		public var gender:String;
		public function Student(selected:Boolean, enabled:Boolean, id:int, name:String, gender:String)
		{
			this.selected = selected;
			this.enabled = enabled;
			this.id = id;
			this.name = name;
			this.gender = gender;
		}
	}
}

 

 5. Custom Event

package event
{
	import flash.events.Event;
	
	import mx.messaging.channels.StreamingAMFChannel;

	public class CheckBoxHeaderSelectedEvent extends Event
	{
		public static const COLUMN_SELECTED:String = "columnSelected";
		public static const COLUMN_DESELECTED:String = "columnDeSelected";
		public function CheckBoxHeaderSelectedEvent(type:String)
		{
			super(type);
		}
		override public function clone():Event
		{
			return new CheckBoxHeaderSelectedEvent(type);
		}
	}
}

 

Comment: 

    1) This enables select all & deSelect all function

    2) This enables disable specific rows according to specific value