Posted on

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

Posted on

Checkbox in Datagrid

Below example shows how to customize column in datagrid with Checkbox.

We have an issue with the item renderer while scrolling the datagrid. It automatically deselects the checkbox what you have selected. So as a workaround for this to avoid the scroll bar for datagrid and make the datagrid height to fit all the rows in one shot and put that datagrid in a panel with Limited height, where panel will have the scrollbar. It would not affect the datagrid itemrenderer.

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>
</content>

<?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)
var XMLL:XMLListCollection=new XMLListCollection(XMLConv.item)
DG.dataProvider=XMLL;
DG.rowCount=XMLL.length;  // Fits datagrid to show all rows without Scrollbar.
PanID.height=300; //Setting panel height would create scrollbar for Panel instead on Datagrid

}
private function onCreate(e:Event):void
{
var XMLLoader:URLLoader=new URLLoader(new URLRequest(“c:\\CompanyDetails.xml”))
XMLLoader.addEventListener(Event.COMPLETE,openXMLValues) }
]]>
</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 headerText=”Select” itemRenderer=”{ChkRen}”  />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
<mx:Component id=”ChkRen”>
<mx:CheckBox/>
</mx:Component>
</mx:Application>


Output