Scroll event

Thread is closed for posting
2 posts, 0 answers
  1. Nicola
    Nicola avatar
    13 posts
    Member since:
    Mar 2017

    Posted 06 Jun 2017 Link to this post

    I need a way to know which element is entering and existing the view port of the list view as it's scrolled. Is there a scroll event for it?

    I'm building a list of contacts and I would like to track the letter that we are currently in and show it to the end user. I was planning to use the header for the current letter. 

  2. Nikolay Iliev
    Nikolay Iliev avatar
    351 posts

    Posted 06 Jun 2017 Link to this post

    Hello Nicola,

    Yes, you can achieve this by tracking the itemIndex through itemLoading event.
    For demonstration let's assume we are working with this example.

    In your XML File declare the callback for itemLoading
    <lv:RadListView  items="{{ dataItems }}"  itemLoading="onItemLoading">

    and then in the code-behind file use the itemIndex to track which cell is currently shown from the top or from the bottom (depending on whether the user is scrolling top-to-bottom or bottom-to-top)
    export function onItemLoading(args) {
        console.log("Currently showing cell with itemIndex: " + args.itemIndex);

    Important: Currently the property is itemIndex but as of the next version of nativescript-telerik-ui plugin there might be a change in the API and the property might be renamed to index. The main idea is to have identical properties for both ListView and RadListView, so keep in mind that this might need some code change after the next official release. The change is logged here, and the issue will be updated once the change is in effect. Until then you can safely use itemIndex

    Nikolay Iliev
    Progress Telerik
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top