RadListView on iOS - scrollToIndex has strange behaviour

2 posts, 1 answers
  1. Clarence
    Clarence avatar
    20 posts
    Member since:
    Nov 2016

    Posted 08 Feb Link to this post

    I found that for RadListView on iOS, when I use scrollToIndex after load on demand action, the display of the list view has strange behaviour.

    Steps to reproduce:

    • Clone the SDKAngular examples repo (https://github.com/telerik/nativescript-ui-samples-angular.git)
    • In the listview load-on-demand sample component (nativescript-ui-samples-angular/sdkAngular/app/listview/load-on-demand/listview-load-on-demand.component.ts), modify the method onLoadMoreItemsRequested() as follows (I changed the number of additional items to load and then call scrollToIndex()):
    public onLoadMoreItemsRequested(args: ListViewEventData) {
        var that = new WeakRef(this);
        Timer.setTimeout(function () {
            var listView: RadListView = args.object;
            var initialNumberOfItems = that.get()._numberOfAddedItems;
            for (var i = that.get()._numberOfAddedItems; i < initialNumberOfItems + 10; i++) {
                if (i > posts.names.length - 1) {
                    listView.loadOnDemandMode = ListViewLoadOnDemandMode[ListViewLoadOnDemandMode.None];
                    break;
                }
     
                var imageUri = applicationModule.android ? posts.images[i].toLowerCase() : posts.images[i];
                that.get()._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + imageUri));
                that.get()._numberOfAddedItems++;
            }
     
            listView.notifyLoadOnDemandFinished();
     
            listView.scrollToIndex(4);
        }, 1000);
        args.returnValue = true;
    }
    • tns run ios
    • Go to listview load-on-demand sample, scroll to bottom, and click "Load More"
    • The display of the listview will become strange (the message load more is keep showing even the items were loaded). Please see attached screen shot file
    • When scroll the listview to bottom and then up, the listview will become normal again
    • Tested on Android and no issue found. Only happens on ios.

    Kindly advice

    Clarence

  2. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    262 posts

    Posted 09 Feb Link to this post

    Hello Clarence,

    Some minor differences in the iOS native control are causing this behaviour (as the loadMore template is recycled and reused as a part of the common cells when calling scrollToIndex). However, there is an easy solution that will work for both iOS and Android - just call scrollToIndex after the timer function. TO do that you will also have to lazy load your list-view before the timer.

    For example:
    public onLoadMoreItemsRequested(args: ListViewEventData) {
       var that = new WeakRef(this);
       var listView: RadListView = args.object; // "cache" your listview
     
       Timer.setTimeout(function () {
            
           var initialNumberOfItems = that.get()._numberOfAddedItems;
           for (var i = that.get()._numberOfAddedItems; i < initialNumberOfItems + 10; i++) {
               if (i > posts.names.length - 1) {
                   listView.loadOnDemandMode = ListViewLoadOnDemandMode[ListViewLoadOnDemandMode.None];
                   break;
               }
     
               var imageUri = applicationModule.android ? posts.images[i].toLowerCase() : posts.images[i];
               that.get()._dataItems.push(new DataItem(i, posts.names[i], "This is item description", posts.titles[i], posts.text[i], "res://" + imageUri));
               that.get()._numberOfAddedItems++;
           }
     
           listView.notifyLoadOnDemandFinished();
     
       }, 1000);
       args.returnValue = true;
     
       listView.scrollToIndex(4); // call this after the Timer func & cells recycled
    }

    Keep in mind that with this code your list-view will load more items but will automatically scroll back to the 4th one from the whole list of items.

    Regards,
    Nikolay Iliev
    Telerik by Progress
    Did you know that you can open individual 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