The following example shows you how you can expand tree nodes (recursively, no less) by selecting an item from a ComboBox control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/29/opening-nodes-in-a-flex-tree-control-using-the-expanditem-method/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;

            private function comboBox_change(evt:ListEvent):void {
                var team:String = ComboBox(evt.currentTarget).selectedItem.@label;
                var node:XMLList = mlb.league.division.team.(@label == team);
                expandParents(node[0]);

                tree.selectedItem = node[0];
                var idx:int = tree.getItemIndex(node[0]);
                tree.scrollToIndex(idx);
            }

            private function expandParents(node:XML):void {
                if (node && !tree.isItemOpen(node)) {
                    tree.expandItem(node, true);
                    expandParents(node.parent());
                }
            }
        ]]>
    </mx:Script>

    <mx:XML id="mlb" source="mlb.xml" />

    <mx:ApplicationControlBar dock="true">
        <mx:ComboBox id="comboBox"
                prompt="Please select a team..."
                dataProvider="{mlb.league.division.team}"
                labelField="@label"
                change="comboBox_change(event);" />
    </mx:ApplicationControlBar>

    <mx:Tree id="tree"
            dataProvider="{mlb}"
            labelField="@label"
            showRoot="false"
            width="300"
            rowCount="8" />

</mx:Application>

View source is enabled in the following example.

 
About The Author

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.

8 Responses to Opening nodes in a Flex Tree control using the expandItem() method

  1. peterd says:

    By the way, there is a bug in the previous example. For cities that have multiple teams (Los Angeles, Chicago, New York) the first matching city is always returned. Sorry, I should have given each team a more unique ID than just a city name.

    Peter

  2. Cato says:

    Hi, how do we do it with an ArrayColletion as the dataprovider?

  3. peterd says:

    A user on FlexCoders (http://tech.groups.yahoo.com/group/flexcoders/) was asking if you could use a Tree as a ComboBox dropdown. I cheated a little and just used the PopUpButton control instead, but for more information, see “Displaying a Tree control as a pop up for a Flex PopUpButton control”.

    Peter

  4. Jaron says:

    Cheers Buddy! I had been mucking around with expandItem() for a few hours and did not realize the tree will not “auto expand” you have to do it manually so thanks for that you just saved me another hour or so of mucking around (=

  5. Eugene says:

    Thanks for the example, but there’s another issue with this code that I’d like to bring up. If you go into the tree and expand nodes all the way down to the leaf, then close the “main” parent node and THEN try your code to expandParents it will not work.

    The reason is because subnodes have the property isOpen set to true because you only closed their “main” node, but not each of the subnodes. Does that make sense?

    The fix is very easy. Just need one more case in the recursion:

    else if(node){epandParents(node.parent();)}

    This will ensure that the recursion will reach all the way up to the root node and expand that if that’s the only one you closed.

    Besides that one little issue the code is awesome and thanks for the example!

  6. Nicolas says:

    How do you lock a node in the open or closed position?

  7. Jimbo Jones says:

    Absolutely Brilliant … thank you so much

  8. Kokumo says:

    Thanks a lottt!!!… you save my day =)

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree