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
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.