LyraSpace » Blog Archive » How to automatically close open branches of a Flex Tree control

Mar 31

How to automatically close open branches of a Flex Tree control

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 …

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="200"
height="300"
>
<mx:Script>
<![CDATA[
import mx.collections.XMLListCollection;
import mx.events.TreeEvent;
import mx.controls.Tree;
import mx.events.ListEvent;
private var dpx:XML = <nav>
<node label="Womens">
<node label="Flora by Gucci" url="assets/swf/movies/flora.swf" />
<node label="Gucci by Gucci" url="assets/swf/movies/gucci.swf" />
<node label="Classics" url="assets/swf/movies/classics.swf" >
<node label="Classic 1" url="http://gucci.com/class/classic1.html" />
<node label="Classic 2" url="http://gucci.com/class/classic1.html" />
<node label="Classic 3" url="http://gucci.com/class/classic1.html" />
</node>
</node>
<node label="Mens">
<node label="Pour Homme" url="assets/swf/movies/ph.swf" >
<node label="Pour Homme 1" url="http://gucci.com/ph/classic1.html" />
<node label="Pour Homme 2" url="http://gucci.com/ph/classic2.html" />
</node>
</node>
</nav>;
private var dp:XMLListCollection = new XMLListCollection(dpx.children());
private function treeItemClick(e:ListEvent):void
{
var item:Object = Tree(e.currentTarget).selectedItem;
/*
Open/close the selected item if a branch
*/
if (tree.dataDescriptor.isBranch(item))
{
tree.expandItem(item,!tree.isItemOpen(item),false,true);
}
else
{
// Clicked on an item -- DO STUFF!
}
}
/*
Function for accessing the Root item of the Tree
*/
private function getRoot(childObj:Object):Object
{
var parentObj:Object = tree.getParentItem(childObj);
if(parentObj != null) return getRoot(parentObj);
else return childObj;
}
/*
Close the branch if the open item is not in it
*/
private function closeOpenItems(e:TreeEvent):void
{
var item:Object = e.item;
for each(var i:Object in tree.openItems)
{
if(XML(getRoot(i)).@label != XML(getRoot(item)).@label)
{
if(i!=item) tree.expandItem(i,false);
}
}
}
]]>
</mx:Script>
<mx:Tree
id="tree"
width="200"
height="300"
dataProvider="{dp}"
labelField="@label"
itemClick="treeItemClick(event)"
itemOpen="closeOpenItems(event)"
/>
</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.