Get Selected Checkbox row in Datagrid

Below example shows how to get the selected checkbox values from Datagrid.
CompanyDetails.xml

<?xml version=”1.0″ ?>
<content>
<item>
<Company>Google</Company>
<Feature>Search Engine / Mail / Social Media</Feature>
<url>www.google.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
<item>
<Company>Yahoo</Company>
<Feature>Search Engine / Mail</Feature>
<url>www.yahoo.com</url>
</item>
</content>

Sample.mxml

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”onCreate(event)” >
<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.collections.XMLListCollection;
import mx.controls.Alert;
import mx.collections.ArrayCollection;
private function openXMLValues(e:Event):void
{
var XMLConv:XMLList=new XMLList(e.target.data)
for(var i:int=0;i<XMLConv.item.length();i++)XMLConv.item[i].appendChild(<Select>false</Select>) // Dynamically adding another node “select” to bind it with the checkbox datagrid column
var XMLL:XMLListCollection=new XMLListCollection(XMLConv.item)
DG.dataProvider=XMLL;
DG.rowCount=XMLL.length;
PanID.height=300;
}
private function onCreate(e:Event):void
{
var XMLLoader:URLLoader=new URLLoader(new URLRequest(“c:\\CompanyDetails.xml”))
XMLLoader.addEventListener(Event.COMPLETE,openXMLValues)
}
private function GetSelected(e:Event):void
{
var ListBoxArray:ArrayCollection=new ArrayCollection()
for(var c:int=0;c<DG.dataProvider.length;c++) {
if(DG.dataProvider.getItemAt(c)[“Select”]==’true’)
{
ListBoxArray.addItem(String(DG.dataProvider.getItemAt(c)[“Company”]))
}
}
Result.dataProvider=ListBoxArray;
}
]]>
</mx:Script>
<mx:Panel width=”430″ id=”PanID”>
<mx:DataGrid x=”21″ y=”25″ width=”388″ id=”DG” >
<mx:columns>
<mx:DataGridColumn dataField=”Company” />
<mx:DataGridColumn dataField=”Feature” />
<mx:DataGridColumn itemRenderer=”{ChkRen}” />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
<mx:Button x=”365″ y=”308″ label=”Get Selected” click=”GetSelected(event)” />
<mx:List x=”438″ y=”10″ width=”217″ height=”191″ id=”Result”></mx:List>
<mx:Component id=”ChkRen”>
<mx:CheckBox selected=”{(data.Select==’true’)?true:false}” click=”{data.Select = (data.Select != ‘true’) ? ‘true’ : ‘false’;}” /> <!– // Selected attribute only accepts boolean type (true | false). data.Select returns a string from XMLListCollection, So casting from string to boolean is necessary here
On click of checkbox, its inverting the value of Select from “true to false” and vice versa –>

</mx:Component>
</mx:Application>

OutPut

Leave a Reply Cancel reply