Srirangan

Another use­ful code sam­ple (orig­i­nally posted on Experts-Exchange.com by yours truly) that allows CheckBox’s to be part of a Data­Grid. This is accom­plished is by set­ting the item­Ren­derer of a Data­Grid­Col­umn to be a Check­Box and han­dling the selected and click prop­er­ties of the CheckBox.

Note: It is impor­tant to set the DataGridColumn’s editable prop­erty to false as the item­Ren­derer itself is the itemEditor.

Code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" horizontalAlign="center" verticalAlign="middle">
<mx:DataGrid id="dataGrid" editable="true">
<mx:dataProvider>
<mx:XMLList xmlns="">
<node isTrue="true" name="xxxxxxxx" location="yyyyyyy"/>
<node isTrue="false" name="xxxxxxxx" location="yyyyyyy"/>
<node isTrue="true" name="xxxxxxxx" location="yyyyyyy"/>
<node isTrue="false" name="xxxxxxxx" location="yyyyyyy"/>
<node isTrue="true" name="xxxxxxxx" location="yyyyyyy"/>
</mx:XMLList>
</mx:dataProvider>
<mx:columns>
<mx:DataGridColumn dataField="@isTrue" width="25" headerText=" " editable="false">
<mx:itemRenderer>
<mx:Component>
<mx:CheckBox selected="{(data.@isTrue == 'true')?true:false}" click="{data.@isTrue = (data.@isTrue != 'true') ? 'true' : 'false';}"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
<mx:DataGridColumn dataField="@name" headerText="Name"/>
<mx:DataGridColumn dataField="@location" headerText="Location"/>
</mx:columns>
</mx:DataGrid>
<mx:DataGrid dataProvider="{dataGrid.dataProvider}"/>
</mx:Application>