Flex Examples
The following example shows you how you can expand and contract individual Tree nodes, or nodes and all child-nodes recursively using the expandItem() and expandChildrenOf() methods in Flex.
Full code after the jump
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/02/expanding-and-collapsing-flex-tree-nodes-using-the-expanditem-and-expandchildrenof-methods/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
private function tree_expandItem(evt:MouseEvent):void {
if (tree.selectedItem && tree.dataDescriptor.isBranch(tree.selectedItem)) {
tree.expandItem(tree.selectedItem, checkBox.selected);
}
}
private function tree_expandChildrenOf(evt:MouseEvent):void {
if (tree.selectedItem && tree.dataDescriptor.isBranch(tree.selectedItem)) {
tree.expandChildrenOf(tree.selectedItem, checkBox.selected);
}
}
</mx:Script>
<mx:XML id="xmlDP">
<root>
<node label="The">
<node label="quick">
<node label="brown" />
<node label="fox" />
<node label="jumped">
<node label="over" />
</node>
</node>
<node label="the" />
</node>
<node label="lazy">
<node label="dog." />
</node>
</root>
</mx:XML>
<mx:ApplicationControlBar dock="true">
<mx:Button id="button1"
label="expandItem(...)"
click="tree_expandItem(event);" />
<mx:Button id="button2"
label="expandChildrenOf(...)"
click="tree_expandChildrenOf(event);" />
<mx:Spacer width="100" />
<mx:CheckBox id="checkBox"
label="open:"
labelPlacement="left"
selected="true" />
</mx:ApplicationControlBar>
<mx:Tree id="tree"
dataProvider="{xmlDP.node}"
labelField="@label"
showRoot="false"
width="200"
rowCount="6" />
</mx:Application>
View source is enabled in the following example.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Is there any way to expand a tree in flex after a filter function has been run on it? ie, a text box has a change event that filters the tree by the key stroke then, what nodes are left are automatically expanded. I’ve sorted out the filter function but, I can’t get the tree to expand on what’s left. Their is a expand all and collapse all buttons but I would like the tree to expand by it’s self after the filter function. Any help for me? I’d be very greatful.
As far as I know and have searched, tree.expandChildrenOf() does not have a max-depth. However , when calling it on a 10 +-5 lvls hierarchy it does not open all of them. Calling it on creationComplete opens up to lvl 4 , calling it on a click even opens up to lvl 7. Is it just me? I will repost if I find the cause of this
It`s my fault, don`t mind the above comment, dinamicly popupating the tree component kind of got in the way
once you set the dataprovider for the tree atonce expanding its nodes will not work so use callLater to make it work.
Example:
For expanding the node after setting the dataProvider of after a dataChange you can call tree.validateNow() and then call the expandItem or expandChildrenOf methods. (The callLater approach hasn’t worked for me)
callLater method is a good way to resolve the problem about scroll bar can not be seen. great job!