15 Replies Latest reply: Jan 12, 2014 11:10 PM by Cheree Singal RSS

    Problem getting vertical scroll bar in tree

    Cheree Singal Community Member
      Hi,

      I am adding nodes to a tree control dynamically. But somehow, a vertical scroll bar doesn't appear during the process. I guess, somehow, the tree is not able to detect the change in the height, hence, is not giving the vertical scroll bar. However, after a node has been populated with the sub-nodes, when I close that node and re-open it, then the scroll bar appears. I really need to fix it as soon as possible. Plz help!

      Thanks in advance,
      Cheree
        • 1. Re: Problem getting vertical scroll bar in tree
          Cheree Singal Community Member
          I am sure many of you would have populated a tree dynamically. Pleeeez give some suggestions.
          • 2. Re: Problem getting vertical scroll bar in tree
            theLoggerGuy
            I have not come across the problem of which you speak. I populate the tree dynamically and it works just fine. Not what you want to hear I know :-(

            You really need to supply some code if you want this kind of detailed help, but as a blind suggestion you could use something like...

            <mx:Tree dataProvidere="fromSomewhere" added="updateTreeDisplay( this )"/>

            private function updateTreeDisplay( component: Object ): void
            {
            // expand the whole tree
            expandChildrenOf(component.firstVisibleItem, true);
            }

            A final thought. You don't provide the method you are updating your tree with, but I was just wondering if you were using a [Bindable] data or doing something manually?
            • 3. Re: Problem getting vertical scroll bar in tree
              Cheree Singal Community Member
              Thanks for replying...
              I am using the following XMLListCollection as the dataProvider for the tree:

              [Bindable]
              public var treeData: XMLListCollection=new XMLListCollection();

              The tree is populated with some 5-6 nodes depending on what comes from the data base at runtime. Then on opening a node, it is further populated with its children and so on. It is during this process that the vertical scroll bar does not appear.
              The function that I am using to add nodes to tree is:
              //finalSrcList is the ArrayCollection that has value objects returned from data base by a remote object.
              public function populateTree(event:TreeEvent): void{
              var parentNode:XML=event.item as XML;
              var temp:XML;
              for(i=0;i<finalSrcList.length;i++){
              temp= <node label={finalSrcList .attribute1} id={finalSrcList.attribute2} isBranch="true"/>
              event.currentTarget.dataDescriptor.addChildAt(parentNode,temp,0);
              }
              }

              Looking forward to some suggestions

              Thanks,
              Cheree
              • 4. Re: Problem getting vertical scroll bar in tree
                Cheree Singal Community Member
                I am re-posting the function.

                public function populateTree(event:TreeEvent): void{
                var parentNode:XML=event.item as XML;
                var temp:XML;
                for(i=0;i<finalSrcList.length;i++){
                temp= <node label={finalSrcList(i).attribute1} id={finalSrcList(i).attribute2} isBranch="true"/>
                event.currentTarget.dataDescriptor.addChildAt(parentNode,temp,0);
                }
                }
                • 5. Re: Problem getting vertical scroll bar in tree
                  theLoggerGuy Community Member
                  I assume that you have something like this somewhere:

                  <mx:Tree dataProvider="treeData"/>

                  If so, then try changing the line:
                  event.currentTarget.dataDescriptor.addChildAt(parentNode,temp,0);
                  to:
                  treeData.addChildAt(parentNode,temp,0);

                  I don't see where you are loading the new values you are retrieving and put them into your "Bindable" data. That may solve your problem.
                  • 6. Re: Problem getting vertical scroll bar in tree
                    JabbyPandaUA Community Member
                    Please post full working example, from the code snippet you had posted I cannot see a problem, it looks credible.
                    • 7. Re: Problem getting vertical scroll bar in tree
                      Cheree Singal Community Member
                      I cant change
                      event.currentTarget.dataDescriptor.addChildAt(parentNode,temp,0);

                      to
                      treeData.addChildAt(parentNode,temp,0);

                      because treeData is an XMLCollection and it doesn't have a method like that.
                      Though it has a method addItemAt(Object, int), it would add the new node at the same level as the parent, not as its child.
                      • 8. Re: Problem getting vertical scroll bar in tree
                        Cheree Singal Community Member
                        Hi Jabby,

                        I am posting all the code associated with the tree and its population.

                        [Bindable]
                        public var treeData: XMLListCollection=new XMLListCollection();

                        //finalSrcList is the ArrayCollection that has value objects returned from data base by a remote object.
                        public function populateTree(event:TreeEvent): void{
                        var parentNode:XML=event.item as XML;
                        var temp:XML;
                        for(i=0;i<finalSrcList.length;i++){
                        temp= <node label={finalSrcList.attribute1} id={finalSrcList.attribute2} isBranch="true"/>
                        event.currentTarget.dataDescriptor.addChildAt(parentNode,temp,0);
                        }
                        }

                        <mx:Tree id="funcTree" height="100%" width="100%" dataProvider="{treeData}" labelField="label" showRoot="false" itemOpen="populateTree(event)"

                        I ll try to reproduce the bug using some dummy data so that you can run the file as it and see the problem.

                        Thanks,
                        Cheree
                        • 9. Problem getting vertical scroll bar in tree
                          theLoggerGuy Community Member
                          Cheree,

                          You'll be pleased to know after some stuffing around I got your program to run and saw the rendering issue you speak of. My solution is to change tactics. I have some working code below. It uses XML data type instead of XMLListCollection. It also uses "appendChild" rather than "addChildAt". However, it does work, so perhaps you can adapt your program to suit these changes.

                          <?xml version="1.0" encoding="utf-8"?>
                          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

                          <mx:Script>
                          <![CDATA[
                          import mx.controls.Tree;

                          [Bindable]
                          private var myTreeData: XML = <root label="root">
                          <node label="level1"/>
                          </root>;

                          private var hasRun: Boolean = false;

                          //finalSrcList is the ArrayCollection that has value objects returned from data base by a remote object.
                          public function myPopulateTree( ): void
                          {
                          var temp: XML;

                          if ( false == hasRun )
                          {
                          hasRun = true;

                          for ( var i: int = 0; i < 13; i++ )
                          {
                          var str: String = "my_" + i*10;

                          temp= <node label={str}/>

                          myTreeData.node.appendChild( temp );
                          }

                          funcTree.expandChildrenOf( funcTree.firstVisibleItem, true );
                          }
                          }
                          ]]>
                          </mx:Script>

                          <mx:Panel width="600" height="250" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20"
                          verticalAlign="middle" horizontalAlign="center">

                          <mx:Tree id="funcTree" height="100%" width="100%" dataProvider="{myTreeData}"
                          labelField="@label" showRoot="false" click="myPopulateTree()"/>

                          </mx:Panel>

                          </mx:Application>

                          HTH
                          • 10. Re: Problem getting vertical scroll bar in tree
                            Cheree Singal Community Member
                            Hi,
                            I was away from this for a few days. But now I am back. I did try your code but the problem still persists:-( The vertical scroll bar didnt show up. Once the node gets populated, only after closing & reopening it, the scroll bar comes. I really need to fix it...

                            Thanks,
                            Cheree
                            • 11. Re: Problem getting vertical scroll bar in tree
                              theLoggerGuy Community Member
                              So my example didn't work or your code still doesn't work? I just ran my snippet again and if you click on the only item in the list then the tree is created and the scroll bar appears - at least it did for me!
                              • 12. Re: Problem getting vertical scroll bar in tree
                                Cheree Singal Community Member
                                Hi,
                                After breaking my head for so long on this problem, I left it as it is. Now, I have resumed to it.
                                I also upgraded to Flex 2.0.1 as the documentation says that this bug is fixed in it but to no avail. Please help me.

                                Thanks,
                                Cheree
                                • 13. Re: Problem getting vertical scroll bar in tree
                                  tcrever

                                  Seems like Flex 4 is working fine:

                                  This is the updated code working on Flex 4.6 using XMLCollection:

                                  <?xml version="1.0" encoding="utf-8"?>

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

                                                 xmlns:s="library://ns.adobe.com/flex/spark"

                                                 xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" applicationComplete="application1_applicationCompleteHandler(event)">

                                      <fx:Declarations>

                                          <!-- Place non-visual elements (e.g., services, value objects) here -->

                                      </fx:Declarations>

                                      <fx:Script>

                                          <![CDATA[

                                              import mx.collections.ArrayCollection;

                                              import mx.collections.XMLListCollection;

                                              import mx.controls.Tree;

                                              import mx.events.FlexEvent;

                                              import mx.events.TreeEvent;

                                              [Bindable]

                                              public var treeData: XMLListCollection=new XMLListCollection();

                                   

                                              private var hasRun: Boolean = false;

                                             

                                              //finalSrcList is the ArrayCollection that has value objects returned from data base by a remote object.

                                              public function populateTree(event:TreeEvent): void{

                                                  if (hasRun == false){

                                                     

                                                      hasRun = true;

                                                     

                                                      var parentNode:XML=event.item as XML;

                                                      var temp:XML;

                                                      var i: int;

                                                      var finalSrcList: ArrayCollection = new ArrayCollection();

                                                     

                                                      // Prepare source list

                                                      for (i=0; i<10; i++){

                                                          var item = new Object();

                                                          item.attribute1 = "attribute " + i.toString();

                                                          item.attribute2 = i.toString();

                                                          finalSrcList.addItem(item);

                                                      }

                                                     

                                                      for(i=0;i<finalSrcList.length;i++){

                                                          temp= <node label={finalSrcList[i].attribute1} id={finalSrcList[i].attribute2} isBranch="true"/>;

                                                          event.currentTarget.dataDescriptor.addChildAt(parentNode,temp,0);

                                                      }

                                                     

                                                  }

                                              }                   

                                             

                                              protected function application1_applicationCompleteHandler(event:FlexEvent):void

                                              {

                                                  var rootItem: XML;

                                                  rootItem = <root label="root" id="1000">

                                                      <node label="level1" id="2000" isBranch="true"/>

                                                      </root>;                                   

                                                 

                                                  treeData.addItem(rootItem);

                                                 

                                              }

                                             

                                          ]]>

                                      </fx:Script>

                                      <mx:Panel width="600" height="250" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20"

                                                verticalAlign="middle" horizontalAlign="center">

                                          <s:Label>

                                  This is using XMLCollection

                                          </s:Label>

                                          <mx:Tree id="funcTree" height="100%" width="100%" dataProvider="{treeData}" labelField="@label" showRoot="false"

                                                   itemOpen="populateTree(event)" />       

                                             

                                   

                                      </mx:Panel>                  

                                                  

                                  </s:Application>

                                  • 14. Re: Problem getting vertical scroll bar in tree
                                    tcrever Community Member

                                    And this is the working sample code using XML (it almost has not modifications from the original posted above) for flex 4.6:

                                    <?xml version="1.0" encoding="utf-8"?>

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

                                                   xmlns:s="library://ns.adobe.com/flex/spark"

                                                   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

                                        <fx:Script>

                                            <![CDATA[

                                                import mx.controls.Tree;

                                                import mx.events.TreeEvent;           

                                                [Bindable]

                                                private var myTreeData: XML = <root label="root">

                                                <node label="level1"/>

                                                </root>;

                                               

                                                private var hasRun: Boolean = false;

                                               

                                                //finalSrcList is the ArrayCollection that has value objects returned from data base by a remote object.

                                                public function myPopulateTree( ): void

                                                {

                                                    var temp: XML;

                                                   

                                                    if ( false == hasRun )

                                                    {

                                                        hasRun = true;

                                                       

                                                        for ( var i: int = 0; i < 13; i++ )

                                                        {

                                                            var str: String = "my_" + i*10;

                                                           

                                                            temp= <node label={str}/>

                                                           

                                                            myTreeData.node.appendChild( temp );

                                                        }

                                                       

                                                        funcTree.expandChildrenOf( funcTree.firstVisibleItem, true );

                                                    }

                                                }

                                            ]]>

                                        </fx:Script>

                                        <fx:Declarations>

                                            <!-- Place non-visual elements (e.g., services, value objects) here -->

                                           

                                           

                                        </fx:Declarations>

                                           

                                        <mx:Panel width="600" height="250" paddingBottom="20" paddingLeft="20" paddingRight="20" paddingTop="20"

                                                  verticalAlign="middle" horizontalAlign="center">

                                            <s:Label>

                                                This is using XML

                                            </s:Label>

                                            <mx:Tree id="funcTree" height="100%" width="100%" dataProvider="{myTreeData}"

                                                     labelField="@label" showRoot="false" click="myPopulateTree()"/>

                                           

                                        </mx:Panel>

                                    </s:Application>

                                    • 15. Re: Problem getting vertical scroll bar in tree
                                      Cheree Singal Community Member

                                      Hi tcrever

                                      Its very late but still, I wanna thank you for taking teh time and effort to respond to my post. We havent upgraded to 4.6 yet. I dont remember the exact code by which resolved the issue but I do remember that I found a work around in Flex 2. Immediately after populating the tree dataprovider, I programaticaly collapsed the tree and then again using an API call, I expanded it. So, the user wouldn't even know there is any change. It works like a charm.

                                       

                                      Thanks again.