RadListView on iOS - scrollToIndex has strange behaviour

[Clarence]

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

[Nick Iliev]

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