NativeScript Angular

RadListView Scroll to Index

This tutorial describes how to scroll a specific item of the RadListView by it's index into the visible portion the UI.

Implementation

  1. All that you need to do is call the scrollToIndex() of the RadListView instance with an valid integer object as the 'index' parameter. The code snippet bellow shows the described approach, note that the snippet assumes there is an RadListView component with #myRadListView set in the HTML in order to retrive it via Angular's @ViewChild.
@ViewChild('myRadListView', { read: RadListViewComponent, static: false }) myListViewComponent: RadListViewComponent;

public onTap() {
    this.myListViewComponent.listView.scrollToIndex(50, false, this.get('myScrollPosition'));
}

Changing the Position of the Scrolled to Item (iOS Only)

When scrolling the RadListView to show a previously not visible item the default beahvior is that the item will be scrolled into the view either in the Top or Left position depending on the current scrollDirection of the layout. You can easily change that default value by assigning the scrollPosition to one of these values ListViewScrollPosition.F