RadListView - scroll to a specific y-position

706 views Asked by At

In RadListView, is it possible to scroll to a specific y-position.

The problem is if I navigate to another page from a RadListView page and then come back - it initializes to the top of the listview. I would prefer to the same y position the user was at before navigating to another page.

I think there's a scroll-to-item method - but that's not necessarily the same y position.

1

There are 1 answers

2
Nick Iliev On BEST ANSWER

You can cache your index using observable ViewModel and pass it when needed (in this case on the loaded event for your list - that is when the users will return back to the list page and the list will load)

e.g. TypeScript

page.ts

export function onListLoaded(args: RadListwModule.ListViewEventData) {
    list = <RadListwModule.RadListView>args.object;

    if (list.items) {
        list.scrollToIndex(roversViewModel.get("cachedIndex"));
    }

    list.refresh();
}

export function onItemTap(args: RadListwModule.ListViewEventData) {
    var tappedItemIndex = args.itemIndex;

    // "cache" the index of our tapped  item
    roversViewModel.set("cachedIndex", tappedItemIndex);

    // navigate to  details page or do what you want to do on itemTap
    frame.topmost().navigate(navEntry);
}

page.xml

 <lv:RadListView items="{{ dataItems }}" loaded="onListLoaded" itemTap="onItemTap">

Also give your cachedIndex initial value of 0 for the first time the list is loaded.

Example based on this POC app . Note that is not exactly the same as scroll-to-the-exact-y-position but you can modify the logic and scroll further to the exact position with getting the cells relative position offset.