How to create a CheckBox itemRenderer
Submitted by softking on Thu, 08/20/2009 - 23:24
In the examples that adobe provide on CheckBox itemRenderer/itemEditor the check box editor is not what i wanted
(http://livedocs.adobe.com/flex/3/html/help.html?content=celleditor_4.html)
The CheckBox item editor , when clicked , shows the check box and allows the user to edit the value (check or un-check).
But when the control loses focus , the check box disappears and "true" or "false" replaces it according to the value of the control
i wanted that the check box control will be visible at all times
(see image at the bottom)
to create that i did not use an Item Editor but rather used the "old" itemRenderer and i do all the updating of the data myself
in the code below you can see that i define an itemRenderer and set the dataField property of it to be the property of the object that holds the boolean value that we want to control (followUp)
<mx:DataGrid id="myBetterGrid"
dataProvider="{initDG}"
editable="true">
<mx:columns>
<mx:DataGridColumn dataField="Company" editable="false"/>
<mx:DataGridColumn dataField="Contact"/>
<mx:DataGridColumn dataField="Phone"/>
<mx:DataGridColumn dataField="Date"/>
<mx:DataGridColumn editable="false"
width="150"
headerText="Follow Up?" >
<mx:itemRenderer>
<mx:Component>
<checkBoxItemRenderer:CBItemRenderer dataField="FollowUp" />
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>You can see that i am using a component called CBItemRenderer, this component is based on a checkBox and shows its "box" selected or not selected according to the value in the field "FollowUp" ( this is the dataField )
See below the code for that component
package com.softologia.checkBoxItemRenderer
{
import flash.events.Event;
import flash.events.MouseEvent;
import mx.controls.CheckBox;
import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.listClasses.ListBase;
import mx.events.FlexEvent;
public class CBItemRenderer extends CheckBox
{
private var _dataField:String;
private var _enabledField:String;
public function CBItemRenderer()
{
super();
setStyle("textAlign","center");
}
override public function set data(value:Object):void {
super.data = value;
if (value != null) {
if( _dataField == null ){
throw new Error("No data field");
}
if(value.hasOwnProperty(_enabledField)){
this.enabled = data[_enabledField];
}
}
}
override public function validateProperties():void
{
super.validateProperties();
selected = data[_dataField];
}
override protected function clickHandler(event:MouseEvent):void
{
super.clickHandler(event);
clickOpp();
}
public function set dataField(dataField:String):void{
_dataField = dataField;
}
public function set enabledField(enabledField:String):void{
_enabledField = enabledField;
}
private function clickOpp():void{
if(data.hasOwnProperty( _dataField ) && _dataField!=""){
data[_dataField] = selected;
}
else if( !data.hasOwnProperty( _dataField ) && _dataField!="" )
{
throw new Error("Data Field is not available in Data Object ");
}
}
}
}The main idea behind this component is that it gets the property name that holds the "boolean" value that we want to show and that it uses this value to select/unselect the "box" of the checkBox. It also uses that field to update the data after the user selected /clicked on the checkBox and changed the value
Note that the column for the checkBox is marked non-editable and this is done to prevent the default "edit" behavior
See full source code attached to this article