02
Dec
07

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.


1 Response to “Expanding and collapsing Flex Tree nodes using the expandItem() and expandChildrenOf() methods”


  1. 1 Nick Dec 5th, 2007 at 3:18 am

    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.

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".




December 2007
M T W T F S S
« Nov   Jan »
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Badge Farm

  • Firefox 2
  • Powered by Redoable 1.2
  • Feeds burnt by Feedburner
  • Feed