how to display checkbox in hierarchial data display in flex advanced datagrid

Question

In my advanced datagrid, I am displaying hierachial data. Instead of the folder icon, i need to display a checkbox which i can select or unselect it. Based on the selected checkbox , i need to display the selected cell value. Plz let me know as how to achieve it.

Answer 1

Below code may help you: - if you want you can implement your logic in it.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.ListEvent;

            [Bindable]
            private var dpHierarchy:ArrayCollection = new ArrayCollection([
                {Region:"Southwest", categories: [
                    {Region:"Arizona", categories: [ 
                        {Territory_Rep:"Barbara Jennings", Actual:38865, Estimate:40000}, 
                        {Territory_Rep:"Dana Binn", Actual:29885, Estimate:30000}]},  
                    {Region:"Central California", categories: [ 
                        {Territory_Rep:"Joe Smith", Actual:29134, Estimate:30000}]},  
                    {Region:"Nevada", categories: [ 
                        {Territory_Rep:"Bethany Pittman", Actual:52888, Estimate:45000}]},  
                    {Region:"Northern California", categories: [ 
                        {Territory_Rep:"Lauren Ipsum", Actual:38805, Estimate:40000}, 
                        {Territory_Rep:"T.R. Smith", Actual:55498, Estimate:40000}]},  
                    {Region:"Southern California", categories: [ 
                        {Territory_Rep:"Alice Treu", Actual:44985, Estimate:45000}, 
                        {Territory_Rep:"Jane Grove", Actual:44913, Estimate:45000}]}
                ]}
            ]);


            protected function onItemClick(event:ListEvent):void
            {
                myADG_ID.expandItem(myADG_ID.selectedItem,!myADG_ID.isItemOpen(myADG_ID.selectedItem));
            }



        ]]>
    </fx:Script>

    <mx:AdvancedDataGrid id="myADG_ID" width="100%" height="100%" defaultLeafIcon="{null}" 
                         folderOpenIcon="{OpenCheckBox}" folderClosedIcon="{CloseCheckBox}"
                         itemClick="onItemClick(event)" 
                         displayDisclosureIcon="false"> 
        <mx:dataProvider>
            <mx:HierarchicalData source="{dpHierarchy}" 
                                 childrenField="categories"/>
        </mx:dataProvider>
        <mx:columns>
            <mx:AdvancedDataGridColumn dataField="Region"/>
            <mx:AdvancedDataGridColumn dataField="Territory_Rep"
                                       headerText="Territory Rep"/>
            <mx:AdvancedDataGridColumn dataField="Actual"/>
            <mx:AdvancedDataGridColumn dataField="Estimate"/>
        </mx:columns>
    </mx:AdvancedDataGrid>  
</s:Application>

OpenCheckBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx" 
                                  focusEnabled="true" width="100%" height="100%">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:CheckBox id="cbSelector" selected="true" width="100%" />
</s:MXAdvancedDataGridItemRenderer>

CloseCheckBox.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:MXAdvancedDataGridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" 
                                  xmlns:mx="library://ns.adobe.com/flex/mx" 
                                  focusEnabled="true" width="100%" height="100%">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:CheckBox id="cbSelector" selected="false" width="100%" />
</s:MXAdvancedDataGridItemRenderer>