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><mx:datagridcolumn datafield="id" width="150" editable="false">
</mx:datagridcolumn><mx:datagridcolumn datafield="FollowUp">
width="150"
headerText="Follow Up?"
itemRenderer="DGCheckBoxEditor" rendererIsEditor="true"
editorDataField="cbSelected"/>
</mx:datagridcolumn>
<mx:textarea id="cellInfo" width="300" height="150">
</mx:textarea>
</mx:columns></mx:datagrid></mx:application>
Tweet
9 Comments »
Recent Comments