Scrolling to a specific index in a Flex List control

10 Responses to Scrolling to a specific index in a Flex List control

1. Nate says:

   November 9, 2007 at 10:18 am

   Is there anyway to make it so the list kinda “iPhone” like scrolls to the selected index? I have no idea how to do this, but it would be cool :)

   Reply
2. List of says:

   November 18, 2007 at 5:42 pm

   Sweet, I have been looking for some way to do this.
   Helpful post, thanks.

   Reply
3. Benjamin says:

   August 12, 2009 at 6:23 am

   That was helpful!

   Reply
4. Benjamin says:

   August 12, 2009 at 6:34 am

   Thank you so much!

   Reply
5. Marcin says:

   August 14, 2009 at 8:05 am

   Do you know how to scroll to index in flex 4 spark list?
   There is no method scrollToIndex.

   Reply
   • Peter deHaan says:

     August 14, 2009 at 9:00 am

     @Marcin,

     In Flex 4/Spark, the API is called ensureIndexIsVisible(). Apparently I haven’t done an entry on that yet, but here’s an example:

     <?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/halo">
      
         <fx:Script>
             <![CDATA[
                 protected function slider_changeHandler(evt:Event):void {
                     list.ensureIndexIsVisible(slider.value);
                 }
      
                 protected function list_labelFunc(item:Object):String {
                     return item.index + ") " + item.label;
                 }
             ]]>
         </fx:Script>
      
         <s:HSlider id="slider" 
                 minimum="0" maximum="{list.dataProvider.length-1}"
                 change="slider_changeHandler(event)" />
      
         <s:List id="list"
                 labelFunction="list_labelFunc" 
                 horizontalCenter="0" verticalCenter="0">
             <s:layout>
                 <s:VerticalLayout gap="0"
                         horizontalAlign="contentJustify"
                         requestedRowCount="5" />
             </s:layout>
             <s:dataProvider>
                 <s:ArrayList>
                     <fx:Object label="One"       index="0" />
                     <fx:Object label="Two"       index="1" />
                     <fx:Object label="Three"     index="2" />
                     <fx:Object label="Four"      index="3" />
                     <fx:Object label="Five"      index="4" />
                     <fx:Object label="Six"       index="5" />
                     <fx:Object label="Seven"     index="6" />
                     <fx:Object label="Eight"     index="7" />
                     <fx:Object label="Nine"      index="8" />
                     <fx:Object label="Ten"       index="9" />
                     <fx:Object label="Eleven"    index="10" />
                     <fx:Object label="Twelve"    index="11" />
                     <fx:Object label="Thirteen"  index="12" />
                     <fx:Object label="Fourteen"  index="13" />
                     <fx:Object label="Fifteen"   index="14" />
                     <fx:Object label="Sixteen"   index="15" />
                     <fx:Object label="Seventeen" index="16" />
                     <fx:Object label="Eighteen"  index="17" />
                     <fx:Object label="Ninteen"   index="18" />
                     <fx:Object label="Twenty"    index="19" />
                 </s:ArrayList>
             </s:dataProvider>
         </s:List>
      
     </s:Application>

     Peter

     Reply
     • Peter deHaan says:

       May 12, 2010 at 4:57 pm

       Not sure why I seemingly didn’t turn this into a real example earlier, but I just reposted this as “Scrolling to a specific index in a Spark List control in Flex 4″.

       Peter
6. kimbyunggeon says:

   February 22, 2010 at 6:25 pm

   thanks useful infomation :-)
   addtion, how to know selected nodes of hierachical xml?

   i want to scrolling automatically by program.

   i know how to dynamically scrolling use scrollToIndex method.. but can not find a value for it

   please any help..

   Reply
7. Vanessa says:

   March 30, 2010 at 8:27 am

   Hi,

   My list control uses a custom item renderer. I am switching views between a data grid and a list view both containing the same data.
   I need to show the selected item in both views when I switch.
   I have tried scrollToIndex() with even a hard coded value, but the list view just refuses to scroll. Is this because of the custom item renderer component? I am defining my list view as follows:

   <mx:List x="0" y="3" id="listView" width="100%" height="100%"
   		dataProvider="{productData}" 
   		itemClick="displayDetail(event)"
   		itemRenderer="components.ProductListRenderer"
   		alternatingItemColors="[#DAF4F6, #FFFFFF]" themeColor="#2119C4"></mx:List>

   Please help…

   Reply
   • Peter deHaan says:

     March 30, 2010 at 4:08 pm

     @Vanessa,

     Can you please file a bug at http://bugs.adobe.com/flex/ and include a simple test case and somebody from the Flex team can take a look.

     Thanks,
     Peter

     Reply