Scrolling to an item in the new List component

[DrunkenBeard]

Hi,

With the way the new List component works how can I scroll to a specific item. The offsetTop method doesn't seem to work (because the item isn't rendered yet) and calculating the offset by adding item heights before reaching the targeted item doesn't work either because you have to scroll first for the items to be rendered.

The idea I have right now is to get the ViewItems, look for the targeted item inside them and scroll to it if I find it, otherwise scroll to the end of the current view (rendering a new set of items) and repeat the process until I find the targeted item. This can be optimized by first scrolling to (itemIndex - 1)*defaultItemHeight before beginning the hunt. The reason this first scrolling is not enough on its own is because of grouping headers that have to be taken into account.

Is there a way to do this more "easily"?

Thanks

[mitchellsimoens]

Use the scroller...

list.getScrollable().getScroller().scrollTo(x, y);

[DrunkenBeard]

Hi,

The problem is the y coordinate. How do I get the coordinate of an item when it hasn't been rendered yet (the new list component doesn't render an item until you actually scroll to it).

[Stx.Greg]

I am having the very same problem. This was easy to do before the infinite list, but as DrunkenBeard mentioned, it is much more difficult when there are list items that haven't been rendered.

[Stx.Greg]

I dug into this a little more. I don't have a full implementation yet, but here are some hints.

After the list's painted event, you can still get the viewItems from the list, but they won't have any offsets to use with the scroller. In the element property of a viewitem, there is a getOffsetsTo method that returns a good offset from the top of the list even if the list is grouped and the item isn't rendered yet.

This should be enough to run with to scroll to a specific item.

[scottd]

If you know the index of the item you want to scroll to, you can use something like this:

function scrollToSelectedItem(list, index) {
    //console.log("scrollToSelectedItem: index=" + index);


    var map = list.getItemMap();
    var offsetTop = map.map[index];
    var centeringOffset = 130;
    if (offsetTop > centeringOffset)
        offsetTop -= centeringOffset;
    //console.log("OffsetTop=" + offsetTop);


    var scroller = list.getScrollable().getScroller();
    scroller.scrollTo(0, offsetTop, undefined);
}