3 Replies Latest reply on Jun 16, 2010 9:25 AM by pradeep reddy

    TREE control vertical scroll position problem

    subhajitnag1982 Level 1

      I have extended a tree to make it a component for questions and answer.

      i set a functionality to expand all answers on a button click.

      but wenever the question n answer items are increasing the height of its display area a scrollbar is comin whch is obvious.

      but my problem is that wenever i am click on any bottom items the vertical scroll position is setting to 0.

      help me

       

      use below code to check

       

       

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

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

      layout="vertical"

      height="400">

       

      <mx:Script>

      <![CDATA[

      import mx.collections.ICollectionView;

      import mx.events.ListEvent;

      import mx.controls.Alert;

       

       

       

       

       

       

       

      private function tree_itemClick(evt:ListEvent):void

      {

                      var item:Object = Tree(evt.currentTarget).selectedItem;

                      if (tree.dataDescriptor.isBranch(item))

                      {

                      tree.openItems = [];

                      tree.expandItem(item, !tree.isItemOpen(item), false);

                      }

       

                     try {}catch(err:Error){};

                  }

       

       

                  private function openAllNodes():void {

                      tree.openItems = menuProvider..folder;

                  }

       

                  private function closeAllNodes():void {

                      tree.openItems = [];

                  }

       

      ]]>

      </mx:Script>

       

       

       

       

      <mx:XML id="menuProvider">

              <root>

                  <folder label="First" isBranch="true">

                  <item label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut enim sapien. Sed porta dictum tortor, vitae tempor sem imperdiet nec. Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Second" isBranch="true">

                      <item label="Nunc ut enim sapien. Sed porta dictum tortor, vitae tempor sem imperdiet nec. Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Third" isBranch="true">

                      <item label="Sed porta dictum tortor, vitae tempor sem imperdiet nec. Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Fourth" isBranch="true">

                      <item label="Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Fifth" isBranch="true">

                      <item label="Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="First" isBranch="true">

                  <item label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut enim sapien. Sed porta dictum tortor, vitae tempor sem imperdiet nec. Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Second" isBranch="true">

                      <item label="Nunc ut enim sapien. Sed porta dictum tortor, vitae tempor sem imperdiet nec. Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Third" isBranch="true">

                      <item label="Sed porta dictum tortor, vitae tempor sem imperdiet nec. Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Fourth" isBranch="true">

                      <item label="Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Fifth" isBranch="true">

                      <item label="Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="First" isBranch="true">

                  <item label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut enim sapien. Sed porta dictum tortor, vitae tempor sem imperdiet nec. Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Second" isBranch="true">

                      <item label="Nunc ut enim sapien. Sed porta dictum tortor, vitae tempor sem imperdiet nec. Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Third" isBranch="true">

                      <item label="Sed porta dictum tortor, vitae tempor sem imperdiet nec. Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Fourth" isBranch="true">

                      <item label="Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Fifth" isBranch="true">

                      <item label="Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="First" isBranch="true">

                  <item label="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut enim sapien. Sed porta dictum tortor, vitae tempor sem imperdiet nec. Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Second" isBranch="true">

                      <item label="Nunc ut enim sapien. Sed porta dictum tortor, vitae tempor sem imperdiet nec. Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Third" isBranch="true">

                      <item label="Sed porta dictum tortor, vitae tempor sem imperdiet nec. Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Fourth" isBranch="true">

                      <item label="Sed accumsan, enim vel facilisis bibendum, lacus tellus blandit dolor, in mollis eros ligula sit amet leo. Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

                  <folder label="Fifth" isBranch="true">

                      <item label="Aliquam cursus, velit eu iaculis luctus, dolor tellus sagittis purus, vitae sodales nisl elit id risus. Etiam in felis eget nisl ullamcorper fringilla. Morbi pharetra elit non nunc luctus ultricies. Quisque eu nunc eu felis feugiat dignissim vitae ut enim. Phasellus commodo suscipit purus. Sed non sapien tellus. Maecenas ut fermentum nisl. Nulla et imperdiet velit. Ut malesuada volutpat mattis. Nunc feugiat nisl at metus vehicula elementum." />

                  </folder>

       

              </root>

          </mx:XML>

       

      <mx:Button label="Open all nodes" click="openAllNodes();" />

          <mx:Button label="Close all nodes" click="closeAllNodes();" />

      <!--itemRenderer="renderer.menu"-->

       

      <mx:Tree id="tree"

              dataProvider="{menuProvider}"

              labelField="@label"

              disclosureOpenIcon="{null}"

      disclosureClosedIcon="{null}"

      folderClosedIcon="{null}"

      folderOpenIcon="{null}"

      defaultLeafIcon="{null}"

      itemClick="tree_itemClick(event);"

      useRollOver="false"

      width="100%"

      height="100%"

      indentation="0"

      variableRowHeight="true"

      showRoot="false">

       

      <mx:itemRenderer>

      <mx:Component>

      <mx:VBox width="100%">

      <mx:Script>

      <![CDATA[

       

      override public function set data(value:Object):void

      {

          super.data = value;

             if (value.@isBranch == true)

              {

              this.setStyle('backgroundColor', 0xcccccc);

              this.height = 25;

              }

              else

              {

              this.setStyle('backgroundColor', 0xfcfcfc);

              this.percentHeight = 100;        

              }

          }

       

      ]]>

      </mx:Script>

       

      <mx:Text id="aa" width="100%" text="{data.@label}" selectable="false" />

       

      </mx:VBox>

      </mx:Component>

      </mx:itemRenderer>

       

      </mx:Tree>

       

      </mx:Application>

        • 1. Re: TREE control vertical scroll position problem
          pradeep reddy Level 1

          Hi,

           

           

          After assigning the openItems property or dataProvider of a Tree you have to call treeID.validateNow() method.. which will make the data assigning process fastly and make sure that what ever the next actions which are going to perform on tree will work fine...

           

          private function tree_itemClick(evt:ListEvent):void

          {

                           var item:Object = Tree(evt.currentTarget).selectedItem;

                           if (tree.dataDescriptor.isBranch(item))

                          {

                           tree.openItems = [];

                          tree.validateNow();

                          tree.expandItem(item,  !tree.isItemOpen(item), false);

                          }

           

                          try {}catch(err:Error){};

                      }

           

           

                      private function  openAllNodes():void

                     {

                          tree.openItems =  menuProvider..folder;

                         tree.validateNow();

                      }

           

                      private function  closeAllNodes():void {

                          tree.openItems = [];

                         tree.validateNow();

                       }

           

          I Hope adding these line make your code to run perfectly....

           

           

          Thanks,

          Pradeep

          • 2. Re: TREE control vertical scroll position problem
            subhajitnag1982 Level 1

            Hey pradeep, thanx for the help but it dint solved my problem.

            • 3. Re: TREE control vertical scroll position problem
              pradeep reddy Level 1

              Try this... This should work..

               

               

                        private function tree_itemClick(evt:ListEvent):void

                        {

                                var item:Object = Tree(evt.currentTarget).selectedItem;

                                if (tree.dataDescriptor.isBranch(item))

                              {

                               var scrollPosition:int = tree.verticalScrollPosition;

                                tree.openItems = [];

                              tree.validateNow();

                              tree.verticalScrollPosition = scrollPosition;

                               tree.expandItem(item,  !tree.isItemOpen(item), false);

                               }

               

                              try {}catch(err:Error){};

                          }

               

               

                           private function  openAllNodes():void

                         {

                             var scrollPosition:int =  tree.verticalScrollPosition;

                              tree.openItems =  menuProvider..folder;

                             tree.validateNow();

                             tree.verticalScrollPosition =  scrollPosition;

                           }

               

                           private function  closeAllNodes():void

                          {

                              var scrollPosition:int =  tree.verticalScrollPosition;

                               tree.openItems = [];

                              tree.validateNow();

                              tree.verticalScrollPosition =  scrollPosition;

                           }

               

              I Hope  adding these line make your code to run perfectly....

               

               

              Thanks,

              Pradeep