Expand tree node : Tree « Components « Flex

1. Flex
2. Components
3. Tree

Expand tree node

      
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle">
    <mx:Script>
        
            import mx.controls.Alert;
            import mx.collections.XMLListCollection;
        
            [Bindable]
            private var searchResult:XMLList;
            private var searchResultIndex:uint = 0;

            private function findByName(event:MouseEvent):void
            {
                var searchStr:String = "A1";
                tree.expandChildrenOf(data[0], false);
                searchResult = data.node.node.(@name.toLowerCase().search(searchStr.toLowerCase()) > -1);
                searchResultIndex = 0;
                if (searchResult[searchResultIndex] != undefined)
                    expandNode(searchResult[searchResultIndex]);
            }
            private function expandNode(xmlNode:XML):void
            {
                while (xmlNode.parent() != null) {
                    xmlNode = xmlNode.parent();
                    tree.expandItem(xmlNode, true, false);
                    tree.selectedItem = searchResult[searchResultIndex];
                }
            }
      
    </mx:Script>
    
    <mx:XMLList id="data">
        <node>
            <node name="A">
                <node name="A1" surname="a1" age="21" wage="1200"/>
                <node name="A2" surname="a2" age="22" wage="1000"/>
                <node name="A3" surname="a3" age="23" wage="1200"/>
                <node name="A4" surname="a4" age="24" wage="1500"/>
            </node>
            <node name="B">
                <node name="B1" surname="b1" age="21" wage="1900"/>
                <node name="B2" surname="b2" age="22" wage="1500"/>
                <node name="B3" surname="b3" age="23" wage="1200"/>
            </node>
            <node name="C">
                <node name="C1" surname="c1" age="29" wage="1500"/>
                <node name="C2" surname="c2" age="45" wage="1500"/>
                <node name="A1" surname="c3" age="25" wage="1300"/>
            </node>
        </node>
    </mx:XMLList>
    
    <mx:VBox>
            <mx:Button label="Search by name" click="findByName(event)" />  
        
        <mx:Tree id="tree" width="100%" height="100%" 
            showRoot="false" dataProvider="{data}" 
            labelField="@name" />
    </mx:VBox>

</mx:Application>

   
    
    
    
    
    
  

Related examples in the same category

1.	Using showRoot property to start the display from the second level
2.	Get selected item from Tree
3.	Add selected value from Tree and add it to List
4.	Get selected label for Tree item
5.	Open nodes in the Tree control based on the values of query string parameters
6.	Add icon fields to Tree
7.	Using the setItemIcon() method for Tree control
8.	depth color for Tree style
9.	alternatingItemColors for Tree style
10.	Set depthColors for Tree control through xml attribute
11.	set alternatingItemColors for Tree control through xml attribute
12.	Use Label for Tree labelField
13.	Drag and drop on a Tree
14.	Search a Tree
15.	Drill Into Tree
16.	Specify an icon displayed with each Tree leaf when you populate it by using XML
17.	Tree Item Icon
18.	Tree Open Node
19.	Use style to set tree node open duration
20.	Define Arrays of colors for properties of the Tree type selector
21.	Use groupIconFunction to display a custom icon for navigation tree top level node
22.	Creating a separate column for the navigation tree