November 6th, 2007 by Kyle
Tags: ActionScript, baselistdata, checkbox, collectionevent, datagrid, datagridlistdata, Flex, idropinlistitemrenderer, ifocusmanagercomponent, itemeditor, itemrenderer
Posted in: Flex
Here is another good datagrid itemrender that I refer to when starting on datagrid renderer issues for customers.
It demonstrates how to create an itemEditor that is based on VBox and has child components (in this case a checkbox) and demonstrates how to implement the IDropInListItemRenderer and IFocusManagerComponent interfaces.
The sample also demonstrates how to add a listener to the underlying dataprovider arraycollection to detect change events and show what data has changed when edits are committed to the collection.
Here is the code for the application:
<mx:application xmlns:mx="http://www.adobe.com/2006/mxml" creationcomplete="init()">
<mx:script>
<!–[CDATA[
import mx.events.CollectionEvent;
import mx.events.DataGridEventReason;
import mx.collections.ArrayCollection;
import mx.events.DataGridEvent;
import mx.events.ListEvent;
[Bindable]–> private var myAC:ArrayCollection = new ArrayCollection([
{id:89, Contact: ‘Bob Jones’, FollowUp: true },
{id:5, Contact: ‘Jane Smith’, FollowUp: true },
{id:7, Contact: ‘Doug Johnson’, FollowUp: false },
{id:15, Contact: ‘John Jackson’, FollowUp: true },
{id:21, Contact: ‘Christina Coenraets’, FollowUp: true },
{id:4, Contact: ‘Joanne Wall’, FollowUp: false },
{id:461, Contact: ‘Maurice Smith’, FollowUp: false },
{id:35, Contact: ‘Lorraine Barnes’, FollowUp: true },
{id:61, Contact: ‘The Dude’, FollowUp: true },
{id:56, Contact: ‘Abe Rockaway’, FollowUp: true }
]);
private function init():void{
myAC.addEventListener(CollectionEvent.COLLECTION_CHANGE, onChange);
}
private function onChange(event:CollectionEvent):void{
for (var i:int=0; i < event.items.length;i++){
var obj:Object=event.items[i].source;
for (var p:String in obj) {
if(p!="mx_internal_uid"){
cellInfo.text += "\n";
if(event.items[i].property==p){cellInfo.text +="*"}
cellInfo.text += p+": " + obj[p];
}
}
}
}
]]>
</mx:script>
<mx:datagrid id="myGrid">
dataProvider="{myAC}" editable="true" >
<mx:columns>
<mx:datagridcolumn datafield="Contact" width="150">
<mx:datagridcolumn datafield="id" width="150" editable="false">
<mx:datagridcolumn datafield="FollowUp">
width="150"
headerText="Follow Up?"
itemRenderer="DGCheckBoxEditor" rendererIsEditor="true"
editorDataField="cbSelected"/>
</mx:datagridcolumn>
</mx:datagridcolumn>
<mx:textarea id="cellInfo" width="300" height="150">
</mx:textarea>
</mx:datagridcolumn></mx:columns></mx:datagrid></mx:application>
Here is the code for the itemEditor:
<!– itemRenderers\dataGrid\myComponents\EditorDGCheckBox.mxml –>
<mx:vbox xmlns:mx="http://www.adobe.com/2006/mxml">
implements="mx.controls.listClasses.IDropInListItemRenderer,mx.managers.IFocusManagerComponent">
<mx:script>
<!–[CDATA[
import mx.controls.listClasses.ListData;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.dataGridClasses.DataGridItemRenderer
import mx.events.FlexEvent;
private var _listData:DataGridListData;
// Define a property for returning the new value to the cell.
public var cbSelected:Boolean;
// Implement the drawFocus() method for the VBox.
override public function drawFocus(draw:Boolean):void {
followUpCB.setFocus();
}
[Bindable]–> override public function set data(value:Object):void{
super.data = value;
followUpCB.selected=data[_listData.dataField];
}
override public function get data():Object {
return super.data;
}
public function get listData():BaseListData
{
return _listData;
}
public function set listData(value:BaseListData):void
{
_listData = DataGridListData(value);
}
]]>
</mx:script>
<mx:checkbox id="followUpCB" label="Follow up needed">
change="cbSelected=followUpCB.selected"/>
</mx:checkbox>
</mx:vbox>
Browse the source of this example.
Download a zipfile containing the source to this sample.
Tweet
9 Comments »

February 14th, 2008 at 2:55 pm
I tried the sample code above but when I tried to compile it I get this error:
Method marked override must override another method.
I’m using Flex 3 Beta. Any idea how to workaround this?
G-Man
February 15th, 2008 at 10:18 am
Sorry, I haven’t compiled this sample against Flex 3 betas. Are there any line #’s in the compilation error that can help pinpoint what line of code is producing the error?
September 1st, 2008 at 3:46 pm
OKAY, I’m ready to pull out my hair.
So far, the checkboxes are showing up in my code, but I’m using an XMLList (as a result of an HTTPService call).
All I really want to find out is the current state of the checkbox: Has it been selected or not (after the user might have clicked around)?
I can trap the “click” for the chckbox in the DGCheckBoxEditor code, but how do I get the TRUE or FALSE value into my main application?
Any help would be tremendously appreciated.
September 17th, 2008 at 4:02 am
Thanx!
September 19th, 2008 at 2:21 pm
@WebGyver: I was having the same issues, needing to bind this puppy to XML instead of the ArrayCollection in the example. I headdesked for a while until I realized that, duh, the XML value is going to be a string and not a boolean, so I had to edit the mxml to test for whatever string in the XML meant “true” and what meant “false”. I’ve put the new code up for your (or anyone else’s) perusal.
http://dev.sugarfilled.com/DGCheckBoxEditor/
Please let me know if this is helpful and/or can be improved upon!
January 2nd, 2009 at 4:31 pm
This worked great for me, helping me to consolidate controls into DataGrids.
I have a question about how to add exceptions to the Check box column. I’m looking at replacing two labels and ten check boxes with one datagrid of four columns. I want check boxes on rows 2-6 but not on the first row. Any ideas? Another thing I’d like to accomplish is have the label for the sixth row depend on whether the boxes on row five are checked.
Essentially, the first two columns of the datagrid represent the left arm and the next two columns represent the right arm. Rows 2-6 indicate actuators for shoulder, upper arm, lower arm, hand and physical weapon. No hand = no physical weapon.
July 29th, 2009 at 5:45 pm
@Daniel Miller:
I tried to go to your page, but the link seems broken, do you have the code put up somewhere else?
Thanks!
November 26th, 2009 at 9:59 pm
thanks, it works for me!!
May 8th, 2010 at 7:34 pm
[...] checkbox itemEditor http://blog.flexmonkeypatches.com/2007/11/06/datagrid-checkbox-itemeditor/ [...]