nativescriptradlistview

RadListView - scroll to a specific y-position


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.


Solution

  • 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.