Welcome to Sơn Phạm's Blog

I spent much time to create CheckBoxHeaderRenderer and CheckBoxItemRender components used in DataGrid so that you can check/uncheck items or you can even check all items by clicking on the checkbox All at the DataGrid header.

Here is code for application (CheckBoxInDataGrid.mxml):

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:component="test.view.component.*" horizontalAlign="center" verticalAlign="middle"
creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.events.CloseEvent;
import mx.events.DataGridEvent;
import mx.events.FlexEvent;
import mx.events.ListEvent;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
import test.model.dto.Category;

private function init() : void {
addEventListeners();
}

private function addEventListeners() : void {
deleteSelectedButton.addEventListener(MouseEvent.CLICK, handleDeleteSelectedButtonClicked);
}

private function handleDeleteSelectedButtonClicked(event : MouseEvent) : void {
if (checkAllCol.itemsSelected.length > 0) {
Alert.show("Are you sure you want to delete the seleted items?", "Confirm Deleted",
Alert.YES | Alert.NO, this, handleConfirmDeleteSelected, null, Alert.YES);
}
}

private function handleConfirmDeleteSelected(event : CloseEvent) : void {
if (event.detail == Alert.YES) {
var provider : ArrayCollection = myDataGrid.dataProvider as ArrayCollection;
for each (var item : Category in checkAllCol.itemsSelected) {
provider.removeItemAt(getItemIndex(provider, item));
}
checkAllCol.itemsSelected.removeAll();
}
}

private function getItemIndex(list : ArrayCollection, item : Category) : int {
for (var index : int = 0; index < list.length; index++) {
if (item.id == list[index].id) {
return index;
}
}
return -1;
}

public function initItemsSelected() : ArrayCollection {
var itemsSelected : ArrayCollection = new ArrayCollection();
for (var i : int = 0; i < 5; i += 2) {
var category : Category = new Category();
category.id = i;
category.title = "Title " + i;
category.description = "Description for title " + i;
itemsSelected.addItem(category);
}
return itemsSelected;
}

public function initItemList() : ArrayCollection {
var itemList : ArrayCollection = new ArrayCollection();
for (var i : int = 0; i < 20; i++) {
var category : Category = new Category();
category.id = i;
category.title = "Title " + i;
category.description = "Description for title " + i;
itemList.addItem(category);
}
return itemList;
}
]]>
</mx:Script>
<mx:VBox horizontalAlign="right">
<mx:DataGrid id="myDataGrid" dataProvider="{initItemList()}" sortableColumns="false">
<mx:columns>
<component:CheckBoxHeaderColumn id="checkAllCol"
headerRenderer="test.view.component.CheckBoxHeaderRenderer"
itemRenderer="test.view.component.CheckBoxItemRenderer"
itemsSelected="{initItemsSelected()}" headerText="All" width="50"/>
<mx:DataGridColumn id="titleCol" headerText="Title" dataField="title" />
<mx:DataGridColumn id="descriptionCol" headerText="Description" dataField="description" width="150" />
</mx:columns>
</mx:DataGrid>
<mx:Button id="deleteSelectedButton" label="Delete Selected"/>
</mx:VBox>
</mx:Application>

The CheckBoxHeaderColumn class (CheckBoxHeaderColumn.as):

package test.view.component
{
import mx.collections.ArrayCollection;
import mx.controls.dataGridClasses.DataGridColumn;

public class CheckBoxHeaderColumn extends DataGridColumn
{
public var itemsSelected : ArrayCollection;
public var checkBoxHeaderRenderer : CheckBoxHeaderRenderer;
public var checkBoxItemRenderer : CheckBoxItemRenderer;

public function CheckBoxHeaderColumn(columnName:String=null)
{
super(columnName);
}
}
}


The CheckBoxHeaderRenderer class (CheckBoxHeaderRenderer.as):

package test.view.component
{
import flash.events.MouseEvent;

import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.CheckBox;
import mx.controls.DataGrid;

public class CheckBoxHeaderRenderer extends CheckBox
{
private var _headerColumn : CheckBoxHeaderColumn;

public function CheckBoxHeaderRenderer()
{
super();
}

override public function set data(value:Object):void {
var list : ArrayCollection = (listData.owner as DataGrid).dataProvider as ArrayCollection;
_headerColumn = value as CheckBoxHeaderColumn;
_headerColumn.checkBoxHeaderRenderer = this;
label = _headerColumn.headerText;
selected = (_headerColumn.itemsSelected.length == list.length) ? true : false;
}

override protected function clickHandler(event:MouseEvent):void {
super.clickHandler(event);
if (!selected)
_headerColumn.itemsSelected = new ArrayCollection();
else {
var list : ArrayCollection = cloneArrayColection((listData.owner as DataGrid).dataProvider as ArrayCollection);
_headerColumn.itemsSelected = list;
}
Alert.show(_headerColumn.itemsSelected.length + " items selected.");
_headerColumn.dispatchEvent(event);
}

public function cloneArrayColection(arrayCollection : ArrayCollection) : ArrayCollection {
var result : ArrayCollection = new ArrayCollection();
for each (var item : Object in arrayCollection) {
result.addItem(item);
}
return result;
}

}
}


The CheckBoxItemRenderer (CheckBoxItemRenderer.as):

package test.view.component
{
import flash.events.MouseEvent;

import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.controls.CheckBox;
import mx.controls.DataGrid;

import test.model.dto.Category;

public class CheckBoxItemRenderer extends CheckBox
{
private var _checkBoxHeaderColumn : CheckBoxHeaderColumn;

public function CheckBoxItemRenderer()
{
super();
}

override public function set data(value:Object):void {
var dataGrid : DataGrid = listData.owner as DataGrid;
var list : ArrayCollection = dataGrid.dataProvider as ArrayCollection;
_checkBoxHeaderColumn = dataGrid.columns[listData.columnIndex];
_checkBoxHeaderColumn.addEventListener(MouseEvent.CLICK, columnHeaderClickHandler);
_checkBoxHeaderColumn.checkBoxItemRenderer = this;
if (_checkBoxHeaderColumn.itemsSelected != null && list != null) {
selected = containsItem(_checkBoxHeaderColumn.itemsSelected, value);
}
}

override protected function clickHandler(event:MouseEvent):void {
super.clickHandler(event);
var dataGrid : DataGrid = listData.owner as DataGrid;
var list : ArrayCollection = dataGrid.dataProvider as ArrayCollection;
var item : Category = list[listData.rowIndex + dataGrid.verticalScrollPosition];
if (!selected) {
_checkBoxHeaderColumn.checkBoxHeaderRenderer.selected = selected;
removesItem(_checkBoxHeaderColumn.itemsSelected, item);
Alert.show("Item de-selected: " + item.title);
}
else {
_checkBoxHeaderColumn.itemsSelected.addItem(item);
Alert.show("Item selected: " + item.title);
if (_checkBoxHeaderColumn.itemsSelected.length == list.length)
_checkBoxHeaderColumn.checkBoxHeaderRenderer.selected = selected;
}
Alert.show(_checkBoxHeaderColumn.itemsSelected.length + " items selected.");
}

public function containsItem(list : ArrayCollection, target : Object) : Boolean {
for each (var item : Object in list) {
if (item.id == target.id)
return true;
}
return false;
}

public function removesItem(list : ArrayCollection, target : Category) : void {
for (var index : int = 0; index < list.length; index++) {
if (list.getItemAt(index).id == target.id) {
list.removeItemAt(index);
return;
}
}
}

private function columnHeaderClickHandler(event:MouseEvent):void {
selected = _checkBoxHeaderColumn.checkBoxHeaderRenderer.selected;
}
}
}

Finally, the Category class:

package test.model.dto
{
public class Category
{
public var id : int;
public var title : String;
public var description : String;

public function Category()
{
}
}
}

This is demo.

The flex 3 project can be downloaded here.