November 6th, 2007 by Kyle
Posted in: Flex, actionscript
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:columns>
</mx:DataGrid>
<mx:TextArea id="cellInfo" width="300" height="150"/>
</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:VBox>
Browse the source of this example.
Download a zipfile containing the source to this sample.
Recent Comments