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>

Build­ing on already avail­able Check­Tree ren­der­ers, here is the first release (0.1)  of the Check­Box­Tree com­po­nent. Sup­ports three state items i.e. “checked”, “unchecked”, “schro­dinger” and it has a basic search func­tion implemented.

Sam­ple code:

<inputs:CheckBoxTree width="480" height="320" title="Indian Subcontinent">
<inputs:dataProvider>
<mx:XMLListCollection>
<mx:source>
<mx:XMLList xmlns="">
<node state='checked' label='All' value='1'/>
<node state='unchecked' label='Afghanistan' value='2'/>
<node state='unchecked' label='Bangladesh' value='3'/>
<node state='unchecked' label='Bhutan' value='4'/>
<node state='unchecked' label='India' value='91'>
<node state='unchecked' label='Jammu and Kashmir' value='10'/>
<node state='unchecked' label='Himachal Pradesh' value='11'/>
<node state='unchecked' label='Punjab' value='12'/>
<node state='unchecked' label='Haryana' value='13'/>
<node state='unchecked' label='Uttaranchal' value='14'/>
</node>
<node state='unchecked' label='Nepal' value='5'/>
<node state='unchecked' label='Pakistan' value='6'/>
<node state='unchecked' label='Sri Lanka' value='7'/>
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
</inputs:dataProvider>
</inputs:CheckBoxTree>

A quick screen shot..
 Again, all code self explana­tory. Proper doc­u­men­ta­tion will fol­low when advanced fea­tures will be intro­duced into the component.

 What’s next?
– Select all, Clear all fea­tures
– Sup­port for mul­ti­ple dat­aProviders
– getCheckedItems(), setCheckedItems() meth­ods etc.

 Demo | Source code (Zip 6kB)