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.


<?xml version=”1.0″ ?>
<Feature>Search Engine / Mail / Social Media</Feature>
<Feature>Search Engine / Mail</Feature>
<Feature>Search Engine / Mail</Feature>

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”” layout=”absolute” creationComplete=”onCreate(event)”>
<![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(
var XMLL:XMLListCollection=new XMLListCollection(XMLConv.item)
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:Panel width=”430″ id=”PanID”>
<mx:DataGrid x=”21″ y=”25″ width=”388″ id=”DG”   >
<mx:DataGridColumn dataField=”Company” />
<mx:DataGridColumn dataField=”Feature” />
<mx:DataGridColumn headerText=”Select” itemRenderer=”{ChkRen}”  />
<mx:Component id=”ChkRen”>


One Reply to “Checkbox in Datagrid”

  1. Keep up the excellent work, I read few posts on this web site and I believe that your web site is really interesting and holds lots of great information.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.