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>