Mar 31

How to automatically close open branches of a Flex Tree control

Design, Flex, Work Add comments

Specifically, ‘How to automatically close open branches of a Flex Tree control WHEN ANOTHER BRANCH IS OPENED’. I need to be clear about this because it’s VERY easy to open all or part of a Tree control or close all the branches at a certain depth but it is deceptively challenging to close the branches of the Tree other than the one you’ve just opened. The reason is this: if you open a child branch and then close all other open branches you will close the parent branch of your tree as well – closing yourself off. This technique allows you to open a branch by clicking on the item as well as the arrow and will check the opened items root item and close all the other open items that DO NOT share this root item.
And some code …

  1. <mx:Application
  2.  
  3.  xmlns:mx="http://www.adobe.com/2006/mxml"
  4.  layout="absolute"
  5.  width="200"
  6.  height="300"
  7.  >
  8.  
  9.  <mx:Script>
  10.  
  11.   <![CDATA[
  12.  
  13.    import mx.collections.XMLListCollection;
  14.    import mx.events.TreeEvent;
  15.    import mx.controls.Tree;
  16.    import mx.events.ListEvent;
  17.    
  18.    private var dpx:XML = <nav>
  19.      
  20.     <node label="Womens">
  21.      <node label="Flora by Gucci" url="assets/swf/movies/flora.swf" />
  22.      <node label="Gucci by Gucci" url="assets/swf/movies/gucci.swf" />
  23.      <node label="Classics" url="assets/swf/movies/classics.swf" >
  24.       <node label="Classic 1" url="http://gucci.com/class/classic1.html" />
  25.       <node label="Classic 2" url="http://gucci.com/class/classic1.html" />
  26.       <node label="Classic 3" url="http://gucci.com/class/classic1.html" />
  27.      </node>
  28.     </node>
  29.    
  30.     <node label="Mens">
  31.      <node label="Pour Homme" url="assets/swf/movies/ph.swf" >
  32.       <node label="Pour Homme 1" url="http://gucci.com/ph/classic1.html" />
  33.       <node label="Pour Homme 2" url="http://gucci.com/ph/classic2.html" />
  34.      </node>
  35.     </node>
  36.    
  37.    </nav>;
  38.    
  39.    private var dp:XMLListCollection = new XMLListCollection(dpx.children());
  40.    
  41.    private function treeItemClick(e:ListEvent):void
  42.    {
  43.                 var item:Object = Tree(e.currentTarget).selectedItem;
  44.                
  45.                 /*
  46.                  Open/close the selected item if a branch
  47.                 */
  48.                 if (tree.dataDescriptor.isBranch(item))
  49.                 {  
  50.                     tree.expandItem(item,!tree.isItemOpen(item),false,true);
  51.                 }
  52.                 else
  53.                 {
  54.                  // Clicked on an item -- DO STUFF!
  55.                 }
  56.             }
  57.            
  58.             /*
  59.              Function for accessing the Root item of the Tree
  60.             */
  61.             private function getRoot(childObj:Object):Object
  62.             {
  63.              var parentObj:Object = tree.getParentItem(childObj);
  64.              if(parentObj != null) return getRoot(parentObj);
  65.              else return childObj;
  66.             }
  67.            
  68.             /*
  69.              Close the branch if the open item is not in it
  70.             */
  71.             private function closeOpenItems(e:TreeEvent):void
  72.             {
  73.              var item:Object = e.item;
  74.              
  75.              for each(var i:Object in tree.openItems)
  76.                 {
  77.                  if(XML(getRoot(i)).@label != XML(getRoot(item)).@label)
  78.                  {
  79.                   if(i!=item) tree.expandItem(i,false);
  80.                  }
  81.                 }
  82.             }  
  83.    
  84.   ]]>
  85.  </mx:Script>
  86.  
  87.  <mx:Tree
  88.  
  89.   id="tree"
  90.   width="200"
  91.   height="300"
  92.   dataProvider="{dp}"
  93.   labelField="@label"
  94.   itemClick="treeItemClick(event)"
  95.   itemOpen="closeOpenItems(event)"
  96.  
  97.   />
  98.  
  99. </mx:Application>

Beware of the animation when doing this. The Flex Tree control does not like playing two animations at the same time so if you try and animate the opening of the branch at the same time as closing all of the others it will not work. I need to build a better Tree control at some point that will handle this. It will certainly make it much slicker. If anyone knows of a component that is already built please let me know.

Digg!

3 Responses to “How to automatically close open branches of a Flex Tree control”

  1. LyraSpace » Blog Archive » Slick Flex Tree control Says:
    April 2nd, 2009 at 9:29 am

    [...] on from the recent post about automatically closing the open branches of the Tree control when you open a new branch; this [...]

  2. Flex, How to automatically close open branches of a Flex Tree control. « Nitin Goel Says:
    May 27th, 2009 at 12:23 pm

    [...] http://blog.lyraspace.com/2009/03/31/how-to-automatically-close-open-branches-of-a-flex-tree-control... [...]

  3. vinsu varghese Says:
    August 24th, 2010 at 10:17 am

    Actually there is no need to add so many functions to do this stuff. I figured out another easy… believe me.. much much easy way to do this.
    private function treeItemClick(evt):void
    {
    tree.openItems = [evt.currentTarget.selectedItem, evt.currentTarget.selectedItem.parent()];
    }

    This will open the current selected node and close all other open nodes. Now how is that????

Leave a Reply

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in