Question : Flex Tree with Radio Button

I have an XML data, and I want to show  that data in Flex Tree control with radio button. How can we combine flex tree and button for leafs.

Let’s assume that we have the following Application in place:

<?xml version="1.0"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#FFFFFF">
   
        <mx:XML format="e4x" id="myData">
            <root>
           
            <item id="item1" label="List A">
                <part id="part1" label="part1" checked = "true"/>
                <part id="part2" label="part2" checked = "false"/>
            </item>

            <item id="item2" label="List B">
                <part id="part1" label="part1" checked = "false"/>
                <part id="part2" label="part2" checked = "false"/>
                <part id="part2" label="part3" checked = "true"/>
                <part id="part2" label="part4" checked = "false"/>
                <part id="part2" label="part5" checked = "false"/>
            </item>
           
            <item id="item3" label="List C">
            </item>          
 
            <item id="item4" label="Item D">
                <part id="part1" label="part1" checked = "false"/>
                <part id="part2" label="part2" checked = "true"/>
            </item>  

            <item id="item5" label="List E">
                <part id="part1" label="part1" checked = "false"/>
            </item>  

            <item id="item6" label="List F">
                <part id="part15" label="part1" checked = "true"/>
            </item>                                  
            </root>
        </mx:XML>
 
 
     <mx:Panel title="Tree with checkbox Control" width="100%" height="100%"
        paddingTop="5" paddingLeft="5" paddingRight="5" paddingBottom="5">

           <mx:Tree
                    id="myTree"  
                    showRoot="false"
                    width="100%"  
                    height="100%"
                    labelField="@label"                                           
                    folderClosedIcon="{null}"
                    folderOpenIcon="{null}"
                        defaultLeafIcon="{null}"
                  dataProvider="{myData}"
                  openItems="{myData..item}">
           </mx:Tree>
       
    </mx:Panel>
             
    </mx:Application>

How can we achieve the following:
•Populate the tree based on checked value (show selected mark if it is true )
•Determine the selected  (checked ) node with its parent for further processing.
•The radio button should work on each node individually
( what I mean by this that We should have radio button group for each parent node.
As an example
List A children has  radio button and the event on that radio button should not affect List B radio button) .

Answer : Flex Tree with Radio Button

The following is my solution:
1- Create a custom TreeItemRenderer as follows:

RadioButtonTreeItemRenderer.as
___________________________________________________
package
{
      import flash.events.Event;
      
      import mx.controls.RadioButton;
      import mx.controls.RadioButtonGroup;
      import mx.controls.treeClasses.*;

      public class RadioButtonTreeItemRenderer extends TreeItemRenderer
      {
            public var RadioBtn:RadioButton;
            public var RadioBtnGR:RadioButtonGroup
        public var itemXml:XML;

            public function RadioButtonTreeItemRenderer()
            {
                  super();
                  mouseEnabled = false;
            }


            override public function set data(value:Object):void{
            if(value != null){
                super.data = value;
               
                this.itemXml = XML(value);
                if(this.itemXml.@checked == true ){
                    this.RadioBtn.selected = true;
                }else{
                    this.RadioBtn.selected = false;
                }
            }
        }
        override protected function createChildren():void{
            super.createChildren();
            RadioBtn = new RadioButton();
            RadioBtnGR = new  RadioButtonGroup();
           
           RadioBtn.group = RadioBtnGR;
           addChild(RadioBtn);
        }
        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth,unscaledHeight);
            if(super.data){
                var tld:TreeListData = TreeListData(super.listData);

                if(tld.hasChildren){
                    this.RadioBtn.visible = false;
                }else{
                    this.RadioBtn.visible = true;
                }
                if(RadioBtn.visible){
                    this.RadioBtn.x = super.label.x
                    super.label.x = this.RadioBtn.x + 17;
                    this.RadioBtn.y = super.label.y+8;
                }
            }
        }
      
      
}
}

__________________________________________

2- application code is :
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="#FFFFFF">

      <mx:XML format="e4x" id="myData">
            <root>

                  <item id="item1" label="List A">
                        <part id="part1" label="part1" checked = "true"  parentid="item1"/>
                        <part id="part2" label="part2" checked = "false" parentid="item1"/>

                  </item>

                  <item id="item2" label="List B">
                        <part id="part1" label="part1" checked = "false" parentid="item2"/>
                        <part id="part2" label="part2" checked = "false" parentid="item2"/>
                        <part id="part3" label="part3" checked = "true"  parentid="item2"/>
                        <part id="part4" label="part4" checked = "false" parentid="item2"/>
                        <part id="part5" label="part5" checked = "false" parentid="item2"/>
                  </item>

                  <item id="item3" label="Item c">
                        <part id="part1" label="part1" checked = "false" parentid="item3"/>
                        <part id="part2" label="part2" checked = "true" parentid="item3"/>
                  </item>  

            </root>
      </mx:XML>

      <mx:Script>
            <![CDATA[
                  import mx.collections.ArrayCollection;
                  import mx.rpc.events.ResultEvent;
                  import mx.controls.Alert;


                  private function TreeClickHandler(event:Event):void
                  {
                        var selectedXmlList:XMLList;
                        var itemObject:Object = event.currentTarget.selectedItem;

                        if (!myTree.dataDescriptor.isBranch(itemObject)) {
                              selectedXmlList = myData.item.part.(@parentid == itemObject.@parentid);
                              processSelection(selectedXmlList,itemObject.@id);
                        }

                  }

                  private function processSelection(list:XMLList,Objid:String):void {
                        var item:XML;
                        for each(item in list) {
                              if (item.@id!=Objid)
                              {
                                    item.@checked = false;
                              }else
                              {
                                    item.@checked = true;
                              }
                        }
                  }

            ]]>
      </mx:Script>


      <mx:Panel width="75%" height="75%">
            <mx:Tree
                         id="myTree"  
                         itemClick="TreeClickHandler(event)"      
                         itemRenderer="RadioButtonTreeItemRenderer"
                         showRoot="false"
                         width="100%"  
                         height="100%"
                         labelField="@label"                                            
                         folderClosedIcon="{null}"
                         folderOpenIcon="{null}"
                         defaultLeafIcon="{null}"
                         dataProvider="{myData}"
                         openItems="{myData..item}">
            </mx:Tree>

      </mx:Panel>

</mx:Application>