Skip navigation
Currently Being Moderated

Problem getting vertical scroll bar in tree

Feb 28, 2007 3:25 AM

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
 
Replies
  • Currently Being Moderated
    Feb 28, 2007 2:08 PM   in reply to Cheree Singal
    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?
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 28, 2007 8:37 PM   in reply to Cheree Singal
    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.
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 1, 2007 1:03 AM   in reply to Cheree Singal
    Please post full working example, from the code snippet you had posted I cannot see a problem, it looks credible.
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 1, 2007 3:08 PM   in reply to Cheree Singal
    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
     
    |
    Mark as:
  • Currently Being Moderated
    Mar 8, 2007 3:59 PM   in reply to Cheree Singal
    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!
     
    |
    Mark as:
  • Currently Being Moderated
    May 23, 2013 3:44 PM   in reply to Cheree Singal

    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>

     
    |
    Mark as:
  • Currently Being Moderated
    May 23, 2013 3:46 PM   in reply to Cheree Singal

    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>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points