9/8/2010 8:41:49 AM
Title:
Datagrid with checkbox Itemrenderer
HI,
I have two datagrids in one screen, i want to populate the data in first datagrid, In the first datagrid having a column checkBoxes. Whenever I select the checkBox , the selected row will copy to another datagrid. How to do it?
Please Help me....
9/8/2010 10:18:54 PM
Hi..
I have done it flex 4..
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
private var gridXML:XML= new XML(
<root>
<info>
<data>
<id>1</id>
<name>abc</name>
<age>24</age>
</data>
<data>
<id>2</id>
<name>abc1</name>
<age>24</age>
</data>
<data>
<id>3</id>
<name>abc2</name>
<age>24</age>
</data>
<data>
<id>4</id>
<name>abc3</name>
<age>24</age>
</data>
<data>
<id>5</id>
<name>abc4</name>
<age>24</age>
</data>
<data>
<id>6</id>
<name>abc5</name>
<age>24</age>
</data>
</info>
</root>
);
private var arr:ArrayCollection= new ArrayCollection();
private var arr2:ArrayCollection= new ArrayCollection();
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
parsegriddata();
}//
private function parsegriddata():void{
for each(var xm:XML in gridXML.info.data)
{
var obj:Object={
id : xm.id,
name: xm.name,
age : xm.age
}
arr.addItem(obj);
}
grid.dataProvider=arr;
}//
public function chkbox_changeHandler(data:Object):void
{
if(arr2.contains(data))
arr2.removeItemAt(arr2.getItemIndex(data));
else
arr2.addItem(data);
grid2.dataProvider=arr2;
}//
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<mx:DataGrid x="39" y="29" id="grid">
<mx:columns>
<mx:DataGridColumn headerText="" dataField="" width="30">
<mx:itemRenderer>
<fx:Component>
<mx:Canvas width="100%" height="100%">
<s:CheckBox id="chkbox" change="outerDocument.chkbox_changeHandler(data)"/>
</mx:Canvas>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Age" dataField="age"/>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid x="39" y="210" id="grid2">
<mx:columns>
<mx:DataGridColumn headerText="" dataField="" width="30">
<mx:itemRenderer>
<fx:Component>
<mx:Canvas width="100%" height="100%">
<s:CheckBox id="chkbox"/>
</mx:Canvas>
</fx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn headerText="Name" dataField="name"/>
<mx:DataGridColumn headerText="Age" dataField="age"/>
</mx:columns>
</mx:DataGrid>
</s:Application>
check it out!!