5 Replies Latest reply on May 1, 2009 8:59 AM by _Natasha_

    Accessing Node Labels - TreeControl with CheckBoxes

    phillipus_rex Level 1

      Hello,

       

      I have a Tree component that is loaded with CheckBoxes.  Each node has a label associated with it, and I need to be able to collect the labels and display them on the right of the component - probably using a Label or Text control.

       

      I can't seem to figure out how to access the names of the items that are checked.  I'm including a complete, and simplified, mxml file.  If anyone would like to take a look at it, I would appreciate it.

       

      Thanks.

       

      OH - And I am using the Tree CheckBox component from this site:  http://www.sephiroth.it/file_detail.php?id=151


      Sorry, but the forum will not allow me to upload the files directly.


      You will probably need to add those classes to see the Tree CheckBox.

       

       

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:controls1="it.sephiroth.controls.*">
          
          
          <mx:Script>
              <![CDATA[
              
              
                  import mx.events.DataGridEvent;
                  import mx.controls.dataGridClasses.DataGridColumn;
                  import mx.effects.easing.Bounce;
                  import mx.effects.easing.Elastic;
                  import components.MyPanel;
                  import mx.effects.easing.Bounce;
                  import mx.effects.easing.Elastic;
                  import mx.events.MenuEvent;
                  import mx.controls.Alert;
                  import mx.controls.Menu;
                  import mx.events.CloseEvent;
                  import mx.controls.*;
                  import mx.events.ListEvent;
                  import mx.events.TreeEvent;
                  import it.sephiroth.renderers.TreecheckboxItemRenderer;
              
              
              
              
              
                  
                  //*******************************  TREE CONTROL CHECKBOX ******************************************
                  
                  
                  /**
                   * Called on checkbox click
                   * check and update for both parents and child nodes
                   * according to the checkbox status
                   */
                  private function onItemCheck( event: TreeEvent ): void
                  {
                      updateParents( event.item as XML, ( event.itemRenderer as TreecheckboxItemRenderer ).checkBox.checkState );
                      updateChilds( event.item as XML, ( event.itemRenderer as TreecheckboxItemRenderer ).checkBox.checkState );
                      
                      
                  }
                  
                  /**
                   * @see it.sephiroth.controls.CheckBoxExtended#checkState
                   * 
                   */
                  private function updateChilds( item:XML, value: uint ):void
                  {
                      var middle: Boolean = ( value & 2 << 1 ) == ( 2 << 1 );
                      var selected: Boolean = ( value & 1 << 1 ) == ( 1 << 1 );
                  
                      if( item.children( ).length( ) > 0 && !middle )
                      {
                          for each(var x: XML in item.node )
                          {
                              x.@checked = value == ( 1 << 1 | 2 << 1 ) ? "2" : value == ( 1 << 1 ) ? "1" : "0";
                              updateChilds( x, value );
                              
                                                     
                              
                          }
                      }
                  }
                  
                  private function updateParents( item: XML, value: uint ): void
                  {
                      var checkValue: String = ( value == ( 1 << 1 | 2 << 1 ) ? "2" : value == ( 1 << 1 ) ? "1" : "0" );
                      var parentNode: XML = item.parent( );
                      if( parentNode )
                      {
                          for each(var x: XML in parentNode.node )
                          {
                              if( x.@checked != checkValue )
                              {
                                  checkValue = "2"
                                  
                                  
                              }
                          }
                          parentNode.@checked = checkValue;
                          updateParents( parentNode, value );
                          
                          
                            
                      }
                  
                  
                  
                  }
                  
        
                  
              ]]>
          </mx:Script>
          
          
          
          
          
          
          <!--*********************  CHOOSE FUNCTIONAL AREAS/CAPABILITIES FOR SCENARIO TREE DATA ******************-->
          
          
          <!--
              Example of the xml used as dataprovider
              for the treecheckbox component.
              @label used for the item label
              @checked used for the checked status:
                  0 = un-checked
                  1 = selected
                  2 = 3rd status selected
                  
                  otherwise you can use the set the "checkField" attributes of the
                  treecheckbox component to specify which xml attribute to use for the
                  checked status
          -->
              <mx:XML xmlns="" id="treeSource">
                  <node label="home" checked="">
                      <node label="First Responder" checked="">
                          <node label="1RSP First Responder - Medical" checked=""/>
                      </node>
                              
                      <node label="Battalion Aid Station/Sick Call" checked="">
                          <node label="Battalion Aid Station" checked=""/>
                          <node label="BAS - NBC" checked=""/>
                          <node label="Evac" checked=""/>
                      </node>
                      
                      <node label="Forward Resuscitative Surgery (FRSS)" checked="">
                          <node label="Pre-Op" checked=""/>
                          <node label="Operating Room" checked=""/>
                          <node label="Post-Op" checked=""/>
                          <node label="Evac" checked=""/>
                      </node>
                      
                      
                      
                      <node label="Surgical Company" checked="">
                          <node label="Triage/SST" checked=""/>
                          <node label="Triage Evac" checked=""/>
                          <node label="Operating Room" checked=""/>
                          <node label="OR Evac" checked=""/>
                          <node label="OR Evac" checked=""/>
                          <node label="Ward" checked=""/>
                          <node label="X-Ray" checked=""/>
                          <node label="Laboratory" checked=""/>
                          <node label="Pharmacy" checked=""/>
                          <node label="NBC Unit" checked=""/>
                          <node label="Dental" checked=""/>
                          <node label="PMO/EHO/PMT" checked=""/>
                          <node label="PM Entomology" checked=""/>
                          <node label="Occupational and Environmental Healty Sur" checked=""/>
                      </node>
                          
                              
                              
                  </node>
              </mx:XML>
              <controls1:TreeCheckBox id="mytree"
                  showRoot="false"
                  width="345"
                  height="100%"
                  dataProvider="{treeSource}"
                  openItems="{treeSource..node}"
                  labelField="@label"
                  checkField="@checked"
                  itemCheck="onItemCheck( event )"
              />
              <mx:Label x="455" y="48" text="Label" fontSize="16" color="#FFFFFF" id="tree_label1"/>
          
          
          
          
      </mx:Application>