29
Nov
07

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

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.


4 Responses to “Opening nodes in a Flex Tree control using the expandItem() method”


  1. 1 peterd Nov 29th, 2007 at 9:19 pm

    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. 2 Cato Dec 20th, 2007 at 2:29 am

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

  3. 3 peterd Feb 26th, 2008 at 11:25 am

    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. 4 Jaron May 13th, 2008 at 8:28 pm

    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 (=

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;".




November 2007
M T W T F S S
« Oct   Dec »
 1234
567891011
12131415161718
19202122232425
2627282930  

Badge Farm

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