3 Replies Latest reply on Aug 27, 2009 11:39 AM by Barna Biro

    Expand the tree by default

    hclselvs

      Hi,

       

      I have a tree component  in my Application and I have given the dataprovider as XMLListCollection. I would like to have the entire tree as expanded mode(all children) by default. To achieve this, I tried expandItem() method but I couldn't see the entire tree as expanded when I load my application.

       

      Any solution will be helpful for me a lot!

       

      Thanks in Advance,

      Srinivasan S

        • 1. Re: Expand the tree by default
          Luke Immes Level 1

          This is tricky, but the following file works for me: all nodes expanded.

          The key is pre-initialize.

          • 2. Re: Expand the tree by default
            Luke Immes Level 1

            This is tricky, but the following file works for me: all nodes expanded.

            The key is pre-initialize.

             

            <?xml version="1.0"?>

            <!--

            Read .xml file, labeled nodes, open as expanded tree.

            Use preinitialize, so that .xml data from file is loaded BEFORE, we initTree(), else xmlValue will be empty in XMLTree1.

            -->

            <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" label="tree"

            preinitialize="xmlLoader.send()"

            >

             

                <mx:Script>

                        import mx.events.*;

                        import mx.collections.XMLListCollection;

             

                     [Bindable]

            private var xmlValue:XMLListCollection;

             

                        private function initTree():void {

                            XMLTree1.expandChildrenOf(XMLTree1.dataProvider[0],true);

                        }

             

            private function xmlReturned(event:Event):void {

            xmlValue = new XMLListCollection(new XMLList(xmlLoader.lastResult));

            }

                </mx:Script>

             

            <mx:HTTPService id="xmlLoader" url="data/dashboardLabeled.xml" resultFormat="e4x" contentType="application/xml"

            result="xmlReturned(event)"

            />

             

                <mx:Tree id="XMLTree1"

                width="288"

                height="696"

                horizontalScrollPolicy="on"

                x="0" y="49"

                borderStyle="solid" backgroundColor="#8481EF" themeColor="#FFE400"

                        labelField="@label"

                        dataProvider="{xmlValue}"

                        creationComplete="initTree()"

                        >

                </mx:Tree>

             

            </mx:Canvas>

            • 3. Re: Expand the tree by default
              Barna Biro Level 3

              A more elegant solution ( in my opinion ) would be to extend the Tree component and implement the desired behavior in a much nicer fashion. It is true that we already have expandChildrenOf(); method that is really great, but if we want to have a nice feature that instantaneously expands or collapses the whole tree more easily ( without having to rewrite the same conditions and who knows what each time we want such a functionality ) then I think that it would be much nicer to extend the Tree component, add the desired feature and start using that custom component instead.

               

              Here's a fast example ( make sure to place this class into a "components" folder if you want to test it ):

               

              package components
              {
                  import mx.controls.Tree;
                  
                  /**
                  * Custom <code>Tree</code> class with custom behavior.
                  */
                  public class ExpandableTree extends Tree
                  {
                      /**
                      * Flag telling if the tree is expanded or not.
                      */
                      protected var _isExpanded:Boolean = false;
                      
                      /**
                      * Constructor.
                      */
                      public function ExpandableTree()
                      {
                          super();
                      }
                      
                      /**
                      * Used to expand or collapse the <code>Tree</code>.
                      * 
                      * @param value Flag telling if we should expand or collapse the <code>Tree</code>.
                      */
                      protected function expandCollapseTree(value:Boolean):void
                      {
                          // Return if there's no data to expand or collapse.
                          if (this.dataProvider == null) 
                          {
                              // The flag should be "false" if no expanding has occurred.
                              _isExpanded = false;
                              return;
                          }
                          
                          // Expand or collapse the children.
                          this.expandChildrenOf(this.dataProvider[0], value);
                      }
                      
                      // ----------------------------------------
                      //  Overridden methods
                      // ----------------------------------------
                      
                      /**
                      * @inheritDoc
                      */
                      override protected function updateDisplayList(w:Number, h:Number):void
                      {
                          // Expand or collapse the Tree.
                          expandCollapseTree(_isExpanded);
                          
                          super.updateDisplayList(w, h);
                      }
                      
                      // ----------------------------------------
                      //  Setters and getters
                      // ----------------------------------------
                      
                      /**
                      * Set a flag telling if the <code>Tree</code> should be expanded or callapsed.
                      */
                      public function set expanded(value:Boolean):void
                      {
                          // Make sure that the passed value is not the current state.
                          if (value == _isExpanded) return;
                          _isExpanded = value;
                          
                          // Invalidate the display list to signal the change.
                          this.invalidateDisplayList();
                      }
                      
                      /**
                      * Returns the current state of the <code>Tree</code>.
                      */
                      public function get expanded():Boolean
                      {
                          return _isExpanded;
                      }
                  }
              }
              

               

              Obviously, you can always extend this "skeleton component" and add even more features. Also, there's another fast example to demonstrate the usage of the component I've just posted above ( it's really simple ):

               

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application 
                  xmlns:mx                    = "http://www.adobe.com/2006/mxml"
                  xmlns:components            = "components.*"
                  backgroundColor             = "0xFFFFFF"
                  backgroundGradientColors    = "[0xFFFFFF, 0xFFFFFF]"
                  layout                      = "vertical">
                  
                  <mx:XMLList id="treeData">
                      <node label="Mail Box">
                          <node label="Inbox">
                              <node label="Marketing"/>
                              <node label="Product Management"/>
                              <node label="Personal"/>
                          </node>
                          <node label="Outbox">
                              <node label="Professional"/>
                              <node label="Personal"/>
                              <node label="Outbox">
                                  <node label="Professional"/>
                                  <node label="Personal"/>
                              </node>
                          </node>
                          <node label="Spam"/>
                          <node label="Sent"/>
                      </node>    
                  </mx:XMLList>
                  
                  <components:ExpandableTree
                      id              = "cmpExpandableTree"
                      width           = "400"
                      height          = "300"
                      showRoot        = "false"
                      expanded        = "true"
                      labelField      = "@label"
                      dataProvider    = "{treeData}"/>
                      
                  <mx:HBox width="400">
                      
                      <mx:Button 
                          label       = "Collapse" 
                          width       = "100%"
                          click       = "cmpExpandableTree.expanded = false;"/>
                      <mx:Button 
                          label       = "Expand"
                          width       = "100%"
                          click       = "cmpExpandableTree.expanded = true;"/>
                      
                  </mx:HBox>
                  
              </mx:Application>
              

               

              So, this would be the "neater solution" ( in my opinion ). But simply using expandChildrenOf(); and passing in the item from where you want to rest of the nodes to expand is just as valid.

               

              With kind regards,

              Barna Biro

              1 person found this helpful