7 Replies Latest reply: Sep 20, 2011 10:43 AM by Flex harUI RSS

    How to programatically expand/collapse Tree nodes?


      I'm using mx.controls.Tree, and Flash Builder 4.5 Premium.



      Under some circumstances when the user returns to the screen, I want to show the Tree in the state it was in when the user closed the application.


      I cannot figure out a way to expand a node.  It expands if the user clicks on the disclosure icon, but I can't find a way to do that programatically.   I'd like to be able to do the reverse, as well, automatically closing an open node based on certain events.


      Can anyone help?


      I hope this is easy and I just cannot find it!  If it is impossible I'll be shocked.  This must come up a lot.

        • 1. Re: How to programatically expand/collapse Tree nodes?
          Flex harUI Adobe Employee

          When saving the state of a tree for another application session, I would make sure there is a persistent UID (like employee number, or transaction ID) and save the UIDs of the nodes in openItems.  Then in the next session, search the data for the uids and set the openItems property.

          • 2. Re: How to programatically expand/collapse Tree nodes?
            TheOriginalEdge Community Member

            Thank you for that suggestion.  I do have data like that encoded into my xml.  Unfortunately I have run this in the debugger and the openitems array never has anything in it, regardless of the state of the tree.


            My tree is simple.  A dozen or so nodes at the top level, each of which has between 2 and 6 children.  So the only question I am trying to determine is, which of the top level nodes is open?  Regardless of how many of them are open, the property "openitems" is always length 0.


            There is no documentation that I see for this property.  I'm prepared to figure out how to use it by examining it in the debugger, but since it is always empty I am at a loss.


            If there is an event I could throw to simulate the user clicking on that component I'm willing to do that. 



            My exact version of the Adobe Data Modeling Core Components is 4.5.304901.v20110217

            • 3. Re: How to programatically expand/collapse Tree nodes?
              Flex harUI Adobe Employee

              Are you using mx:Tree or some third party tree?


              OpenItems is an object, not an array.

              • 4. Re: How to programatically expand/collapse Tree nodes?
                TheOriginalEdge Community Member

                I'm using mx:Tree, not a third party component.


                In the debugger, openitems is an Object that shows [] and a length of 0.  In the code for the component Tree.as, for instance:


                   public function get openItems():Object


                        var openItemsArray:Array = [];

                        for each(var item:* in _openItems)




                        return openItemsArray;




                More to the point of my original question, the method I was trying to find seems to be expandItem().  Unfortunately, when I call it, nothing happens.  I've tried validateNow and callLater, too.  I'm going to build a small test case to see what's wrong with it.  If it is still failing in that, it's the component, not my code, and I'll have something I can post.

                • 5. Re: How to programatically expand/collapse Tree nodes?

                  I tried to save the opened tree and later  open it  programatically.

                  Try this code






                  <?xml version="1.0"?>

                  <!-- dpcontrols/TreeOpenNode.mxml -->

                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"






                                                import flash.events.*;


                                                import mx.controls.*;

                                                import mx.events.*;


                                                private var openedFolders :Object = {};

                                                private var folderList:XMLList;

                                                private var so:SharedObject;


                                                private function initTree():void


                                                          folderList = MailBox.source;

                                                          so = SharedObject.getLocal("opendFoldersData","/");



                                                private function openedBefore(folder:XML):Boolean


                                                          var boolean:Boolean = false;


                                                          for each(var openedFolder:Object in openedFolders)


                                                                    if(openedFolder.@label == folder.@label)


                                                                              boolean = true;




                                                          return boolean;





                                                protected function save(event:MouseEvent):void



                                                          so.data.open_folder_list = lessonlist.openItems;




                                                private function openSavedFolder():void


                                                          openedFolders = so.data.open_folder_list


                                                          for each(var folder:XML in folderList)





                                                                              var subfolders:XMLList = folder..folder;


                                                                              for each(var subfolder:XML in subfolders)



















                            <mx:Tree id="lessonlist"

                                                 width="150" height="170"



                                      <mx:XMLListCollection id="MailBox">



                                                          <folder label="Mail" data="100">

                                                                    <lesson label="Inbox" data="70"/>

                                                                    <folder label="Personal Folder" data="10">

                                                                              <lesson label="Business" data="2"/>

                                                                              <folder label="Demo" data="3">

                                                                                        <lesson label="Lesson 1" data= "6"/>


                                                                              <lesson label="Saved Mail" data="5" />


                                                                    <lesson label="Sent" data="15"/>

                                                                    <lesson label="Trash" data="5"/>







                            <s:Button id="theButton" label="Save" click="save(event)"/>

                            <s:Button id="openButton" label="Open" click="openSavedFolder()"/>


                  • 6. Re: How to programatically expand/collapse Tree nodes?
                    TheOriginalEdge Community Member

                    A very nice example.


                    The answer to my original question was, in fact, the expandItem() method.  It is working for me now.


                    Your example does demonstrate a feature I've discovered about this component.  The only way to move thru it is using a 'for each' loop.  It is awkward, and could become a performance issue if the amount of data got large. 


                    The fact that the data has to be a String also imposes some awkward limitations on the ItemRenderer, if you want to do anything complex in it.  It's a bit of a pain to encode ids into Strings, and then decode them and look them up in a static data model referenced from each Item Renderer.  If there's a cleaner way of doing that I haven't hit upon it.

                    • 7. Re: How to programatically expand/collapse Tree nodes?
                      Flex harUI Adobe Employee

                      Sure, “for each” depends on number of items, but so does calling expandItem, and expandItem has function call overhead.  OpenItems should be the more efficient solution.


                      Most large databases have a string-based UID or you can provide one via the IUID interface.  And most database has have a fast index for that UID.