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

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.