Subscribe

  • Subscribe  

Tree Control Manipulation – I

Posted by Moxie Zhang | April 12, 2005 .

Flex Tree Control is a very useful GUI component to represent structural data and navigate through related data elements. manipulation

Let’s start with some basic tree actions. In this example, the initial tree is built from static data. A working example is here. Just unzip and drop the tree file in your Flex app area.

Define Default Tree
Tree Screen shot
In real application, you might build major structure this way but your tree element might well be from dynamic data. Let’s just make it easy here first. A design note, you need think about how to separate data(model) and UI construction in real (and good) application.

<mx:Tree id=”rptree” height=”350″ initialize=”initTree()” dragEnabled=”true”>
·· <mx:dataProvider>
···· <mx:XML>
····· <node label=”Release Package”>
······<node label=”Function Engineers” isBranch=”true”/>
······<node label=”Drawings” isBranch=”true”>
······<node label=”1233423,A,2″/>
······<node label=”2232323,B,1″/>
······<node label=”1235643,A,1″/>
······<node label=”9308323,D,3″/>
······<node label=”1292343,C,2″/>
·····</node>
····<node label=”Distribution List” isBranch=”true”/>
····</node>
···</mx:XML>
··</mx:dataProvider>
</mx:Tree>

Expand All Tree Element
I really wish that tree control has property to taggle the full expanding state. But couple of lines of code can do this easily. Notice here how you travel through tree via the getTreeNodeAt() method. And the color should help you find how this is function is called, fron the initialize event.

function initTree(){
···rptree.setIsOpen(rptree.getTreeNodeAt(0), true);
···rptree.setIsOpen(rptree.getTreeNodeAt(0).getTreeNodeAt(1), true);
}

Leave a Comment

If you would like to make a comment, please fill out the form below.


Name

Email

Website

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word

Comments

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word


Related Posts

  • No related posts

2 Comments so far
  1. ansen  November 10, 2005 10:00 am

    Can you share your tree control to me?
    I want study a lot!
    thanks!

  2. vijayan  April 19, 2007 8:51 am

    A working example is here. Just unzip and drop the tree file in your Flex app area

    Hi download the example and its not working its showing error in rpwizard.as AS below

    Severity Description Resource In Folder Location Creation Time Id
    2 1061: Call to a possibly undefined method getTreeNodeAt through a reference with static type mx.controls:Tree. rpwizard.as TMDL line 5 April 19, 2007 10:19:37 AM 271

    what i have to do to solve this issue.

    Please help me out

<

Direct TV Offers - usdirect has the best directtv deals