flex Datagrid checkbox

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/27/using-a-checkbox-control-as-a-list-item-renderer-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:vo="*"
layout="horizontal"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">

<mx:Script>
<![CDATA[
import mx.events.CollectionEvent;
import mx.utils.ObjectUtil;

private function init():void {
arrColl.dispatchEvent(new CollectionEvent(CollectionEvent.COLLECTION_CHANGE));
}

private function arrColl_collectionChange(evt:CollectionEvent):void {
try {
var tArr:Array = arrColl.source.filter(selectedOnly);
textArea.text = ObjectUtil.toString(tArr);
lbl.text = tArr.length.toString() + " item(s) selected";
} catch (err:Error) {
// ignore.
}
}

private function selectedOnly(item:ListItemValueObject, idx:uint, arr:Array):Boolean {
return item.isSelected;
}
]]>
</mx:Script>

<mx:Array id="arr">
<vo:ListItemValueObject label="One" isSelected="true" />
<vo:ListItemValueObject label="Two" isSelected="true" />
<vo:ListItemValueObject label="Three" isSelected="true" />
<vo:ListItemValueObject label="Four" isSelected="true" />
<vo:ListItemValueObject label="Five" isSelected="false" />
<vo:ListItemValueObject label="Six" isSelected="false" />
<vo:ListItemValueObject label="Seven" isSelected="false" />
<vo:ListItemValueObject label="Eight" isSelected="false" />
<vo:ListItemValueObject label="Nine" isSelected="false" />
<vo:ListItemValueObject label="Ten" isSelected="false" />
<vo:ListItemValueObject label="Eleven" isSelected="false" />
<vo:ListItemValueObject label="Twelve" isSelected="false" />
</mx:Array>

<mx:ArrayCollection id="arrColl"
source="{arr}"
collectionChange="arrColl_collectionChange(event);" />

<mx:Panel id="panel"
title="Items"
status="{arrColl.length} total"
styleName="opaquePanel">
<mx:List id="list"
dataProvider="{arrColl}"
alternatingItemColors="[#EEEEEE, white]"
width="150"
rowCount="8">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selectedField="isSelected"
change="onChange(event);">
<mx:Script>
<![CDATA[
private function onChange(evt:Event):void {
data.isSelected = !data.isSelected;
}
]]>
</mx:Script>
</mx:CheckBox>
</mx:Component>
</mx:itemRenderer>
</mx:List>
<mx:ControlBar horizontalAlign="right">
<mx:Label id="lbl" />
</mx:ControlBar>
</mx:Panel>

<mx:TextArea id="textArea"
verticalScrollPolicy="on"
width="100%"
height="{panel.height}" />

</mx:Application>

package
{
public class ListItemValueObject
{
[Bindable]
public var label:String;

[Bindable]
public var isSelected:Boolean;

public function ListItemValueObject() {
super();
}
}
}

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/12/using-a-combobox-to-filter-items-in-a-datagrid-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">

<mx:Script>
<![CDATA[
import mx.controls.dataGridClasses.DataGridColumn;

private function toggleFilter():void {
if (checkBox.selected) {
arrColl.filterFunction = processFilter;
} else {
arrColl.filterFunction = null;
}
arrColl.refresh();
}

private function processFilter(item:Object):Boolean {
return parseFloat(item.value) == 0;
}

private function value_labelFunc(item:Object, col:DataGridColumn):String {
return item[col.dataField].toFixed(2);
}
]]>
</mx:Script>

<mx:ArrayCollection id="arrColl">
<mx:source>
<mx:Array>
<mx:Object name="ColdFusion" value="0.00" />
<mx:Object name="Dreamweaver" value="0.12" />
<mx:Object name="Fireworks" value="1.01" />
<mx:Object name="Flash" value="0" />
<mx:Object name="Flash Player" value="-0.00" />
<mx:Object name="Flex" value="0.00" />
<mx:Object name="Illustrator" value="2.92" />
<mx:Object name="Lightroom" value="0.32" />
<mx:Object name="Photoshop" value="0.06" />
</mx:Array>
</mx:source>
</mx:ArrayCollection>

<mx:Panel status="{arrColl.length}/{arrColl.source.length} item(s)">
<mx:DataGrid id="dataGrid"
dataProvider="{arrColl}"
verticalScrollPolicy="on">
<mx:columns>
<mx:DataGridColumn dataField="name" />
<mx:DataGridColumn dataField="value"
labelFunction="value_labelFunc" />
</mx:columns>
</mx:DataGrid>
<mx:ControlBar>
<mx:CheckBox id="checkBox"
label="Filter DataGrid"
click="toggleFilter();" />
</mx:ControlBar>
</mx:Panel>

</mx:Application>