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