Expanding and collapsing Flex Tree nodes using the expandItem() and expandChildrenOf() methods

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

View MXML

<?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 &amp;&amp; tree.dataDescriptor.isBranch(tree.selectedItem)) {
                tree.expandItem(tree.selectedItem, checkBox.selected);
            }
        }

        private function tree_expandChildrenOf(evt:MouseEvent):void {
            if (tree.selectedItem &amp;&amp; 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.

6 thoughts on “Expanding and collapsing Flex Tree nodes using the expandItem() and expandChildrenOf() methods

  1. 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.

  2. 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

  3. It`s my fault, don`t mind the above comment, dinamicly popupating the tree component kind of got in the way

  4. once you set the dataprovider for the tree atonce expanding its nodes will not work so use callLater to make it work.
    Example:

    tree.dataProvider=newDataProvoder;
    callLater(openTree);
            public function openTree():void {
                for each (var item:XML in tree.dataProvider.source) {
                    if( item.children() != null ) {
                        tree.expandItem(item,true,false);
                    }
                } 
            }
    1. 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)

Comments are closed.