4 Replies Latest reply on Oct 14, 2011 10:23 PM by Shongrunden

    Flex Spark List scroll problem when selected Index is set

    fresher4flex Level 1

      Hi I have a Flex Spark List.  I am changing the index order when the user clicks on the Up and down buttons.  This fucntionality works fine. After changing the index order I am setting the selectedIndex  for my list. list.selectedIndex.

       

      My problem is the scroller is not scrolling automatically to the selectedIndex item in the list. that means its not coming to the view Area. User has to scroll using mose to see the selected Index. i wnt this to be happened automatically.

       

      I tried the following approaches , but they are not working properly.

       

      1)list.ensureIndexIsVisible(selectedIndexvalue);

       

      2) The below example is working partially

       

      http://flexponential.com/2011/02/13/scrolling-to-the-bottom-of-a-spark-list/

       

      Can someone help me out with this.

        • 1. Re: Flex Spark List scroll problem when selected Index is set
          I tried Level 1

          If you're not gaining too much from a spark list, you could always revert back to an mx list.  That list object has a property called verticalScrollPosition, into which you can simply pass the index of the selected item.

          • 2. Re: Flex Spark List scroll problem when selected Index is set
            Shongrunden Adobe Employee

            Can you please provide a small sample application that demonstrates ensureIndexInView() nt working?

            • 3. Re: Flex Spark List scroll problem when selected Index is set
              TheOriginalEdge Level 1

              Your post on the workaround (using the old mx:List control) was very helpful to

              me, so I've taken it upon myself to provide you with an example of the defect.

               

              There are 3 classes.  Application, data, item renderer.

               

              I'm using the most recent version of Flash Builder (4.5 Premium).

               

              The call to ensure that line 70 is visible does not work.  The list is reset

              by the refresh to the top.  This is exactly what I've been experiencing in

              my own application (in a far more complicated case.)

               

              Thanks for describing the workaround!

               

              Regards,

                       Edward

               

               

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

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

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

                                     xmlns:mx="library://ns.adobe.com/flex/mx"

                                     contentCreationComplete="initComponent()">

                  <fx:Script>

                      <![CDATA[

                          import flash.sampler.NewObjectSample;

                         

                          import mx.collections.ArrayCollection;

                         

                          [Bindable]private var dp:ArrayCollection = new ArrayCollection();

                         

                          private function initComponent() : void {

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

                                  var item:ItemData = new ItemData(i, 'A' + i.toString());

                                  dp.addItem(item);

                              }

                              dp.refresh();

                              list.ensureIndexIsVisible(70);

                          }

               

                      ]]>

                  </fx:Script>

                 

                  <fx:Declarations>

               

                  </fx:Declarations>

                  <s:List id="list" x="10" y="10" width="200" height="200"

                          itemRenderer="MyItemRenderer"

                          dataProvider="{dp}">

                  </s:List>

                 

               

              </s:WindowedApplication>

               

               

              package

              {

                  [Bindable]public class ItemData

                  {

                      public var intData:int;

                      public var stringData:String;

                      public function ItemData(num:int, str:String)

                      {

                          intData = num;

                          stringData = str;

                      }

                  }

              }

               

               

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

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

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

                              xmlns:mx="library://ns.adobe.com/flex/mx"

                              autoDrawBackground="true">

                  <fx:Script>

                      <![CDATA[

                          [Bindable]public var item:ItemData;

                         

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

                              item = value as ItemData;

                              trace(item.intData);

                          }

                      ]]>

                  </fx:Script>

                  <s:Label text="{item.intData}"/>

                  <s:Label text="{item.stringData}"/>

                 

              </s:ItemRenderer>

              • 4. Re: Flex Spark List scroll problem when selected Index is set
                Shongrunden Adobe Employee

                Looks like you are trying to call ensureIndexInView() too early.

                 

                 

                Here's an example of waiting for the first updateComplete after populating the dataProvider:

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

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

                                       creationComplete="initComponent()">

                    <fx:Script>

                        <![CDATA[

                            import mx.collections.ArrayCollection;

                           

                            [Bindable] private var dp:ArrayCollection = new ArrayCollection();

                           

                            private function initComponent() : void {

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

                                    dp.addItem(i);

                                }

                                dp.refresh();

                               

                                // set the scroll position after the first updateComplete

                                list.addEventListener("updateComplete", ensure);

                            }

                           

                            private function ensure(e:Event):void {

                                list.removeEventListener("updateComplete", ensure);

                                list.ensureIndexIsVisible(70);

                            }

                        ]]>

                    </fx:Script>

                   

                    <s:layout>

                        <s:VerticalLayout/>

                    </s:layout>

                   

                    <s:List id="list" width="200" height="200"

                            dataProvider="{dp}">

                        <s:itemRenderer>

                            <fx:Component>

                                <s:ItemRenderer>

                                    <s:Label text="{data}"/>

                                </s:ItemRenderer>

                            </fx:Component>

                        </s:itemRenderer>

                    </s:List>

                   

                </s:WindowedApplication>

                 

                This post has a little more information on when to set scroll position in different scenarios: http://flexponential.com/2010/12/05/saving-scroll-position-between-views-in-a-mobile-flex- application/