3 Replies Latest reply on Jun 9, 2012 4:00 AM by Andrushkin

    Restoring a Spark List scroll position after updating its dataProvider

    afarber Level 1

      Hello fellow Flex coders,

       

      I have a question and have prepared a very simple test case to demonstrate my problem

       

      I wonder, how restore the position of a Spark List's scrollbar after data been loaded from server

      (in my real application it's XML being loaded into XMLListCollection):

       

      test.png

       

      <?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="400" minHeight="300"
         
      applicationComplete="load(event)">

         
      <fx:Script>
              <![CDATA[
                  import mx.collections.ArrayList;
                  import mx.events.FlexEvent;

                  [Bindable]
                  private var myData:ArrayList = new ArrayList();

                  private function load(event:Event):void {
                      var pos:Number = myList.layout.verticalScrollPosition;
                      trace('before=' + myList.layout.verticalScrollPosition);

                      myData.removeAll();
                      for (var i:uint = 1; i <= 100; i++)
                          myData.addItem('Item #' + i);

                      myList.layout.verticalScrollPosition = pos;
                      trace('after=' + myList.layout.verticalScrollPosition);
                  }
              ]]>
         
      </fx:Script>

         
      <s:VGroup gap="20" width="100%" height="100%">
             
      <s:List id="myList" dataProvider="{myData}"
                     
      width="80%" height="80%" fontSize="24" />
             
      <s:Button id="myBtn" label="Load" click="load(event)" />
         
      </s:VGroup>

      </s:Application>

        • 1. Re: Restoring a Spark List scroll position after updating its dataProvider
          saisri2k2 Level 4

          list.ensureindexvisible( ) method on list is half the solution to move to a particular row of the list any time. but, you have to figure the other half, how to get the index of the item that is currently visible in the first row of the visible rows.

          • 2. Re: Restoring a Spark List scroll position after updating its dataProvider
            afarber Level 1

            I've found the solution in Russ Watson's blog to use a custom DataGroup in List's skin:

             

            package {
            import mx.collections.IList;
            import mx.events.CollectionEvent;
            import spark.components.DataGroup;

            public class MyDataGroup extends spark.components.DataGroup {
              private var _dataProviderChanged:Boolean;
              private var _lastScrollPosition:Number = 0;
             
              public function MyDataGroup() {
               super();
              }
             
              override public function set dataProvider(value:IList):void {
               if (dataProvider != null && value != dataProvider)
                dataProvider.removeEventListener(CollectionEvent.COLLECTION_CHANGE, onDataProviderChanged);

               super.dataProvider = value;
              
               if (value != null)
                value.addEventListener(CollectionEvent.COLLECTION_CHANGE, onDataProviderChanged);
              }
             
              override protected function commitProperties():void {
               var lastScrollPosition:Number = _lastScrollPosition;
              
               super.commitProperties();
              
               if (_dataProviderChanged)
                verticalScrollPosition = lastScrollPosition;
              }
             
              private function onDataProviderChanged(e:CollectionEvent):void {
               _dataProviderChanged = true;
               invalidateProperties();
              }
             
              override public function set verticalScrollPosition(value:Number):void {
               super.verticalScrollPosition = value;
               _lastScrollPosition = value;
              }
            }
            }

             

            • 3. Re: Restoring a Spark List scroll position after updating its dataProvider
              Andrushkin Level 1

              This one works fine for me:

               

              Creat List that extends spark.components.List

               

              add this code

               

                             private var lastScrollPosition:int;

               

                                            override public function set dataProvider(value:IList):void {

                                                      if (dataGroup) {

                                                                lastScrollPosition = dataGroup.verticalScrollPosition;

                                                      } else {

                                                                lastScrollPosition = 0;

                                                      }

               

                                                      super.dataProvider = value;

               

                                                      if (dataGroup && lastScrollPosition > 0) {

                                                                callLater(restoreScrollPosition);

                                                      }

                                            }

               

                                            private function restoreScrollPosition():void {

                                                      dataGroup.verticalScrollPosition = lastScrollPosition;

                                            }