RadListView on Android (NS 3.0.0, UI 2.0.1) - load on demand - scrollToIndex strange behavior

[Clarence]

I had a sample project using latest version of Nativescript and UI for Nativescript, with RadListView and load on demand feature.

However, when I run the app on Android, after loaded more items and scrollToIndex, found that the list will "flip" for 2 times to scroll to the correct position.

Steps to re-produce:

• Clone the sample project (https://github.com/skywidesoft/ns-radlistview-test.git)
• tns run android --emulator
• Scroll to end and click load more items
• The list will scroll back to Item 1, then to item 9 for 2 times (expect only 1 time)
  
  

Kindly advice
Clarence

[Nick Iliev]

Hey Clarence,

Using your test application with Android emulators on my side but I was not able to reproduce the issue described (as far as I understand the list is scrolling twice instead of once). 
I am attaching a link containing a video recording that demonstrates how to application is behaving on my side - can you please take a look at let me know if that is the expected behavior and if not please can you clarify what should be the expected one.

I was testing on an Android API23 emulator - can you also share on what device/emulator you are experiencing this one?

Here is the link to the video I've made so you can observe the default behavior on my side.

Regards,
Nikolay Iliev
Telerik by Progress

[Clarence]

Hi Nikolay,

 

I am testing with Genymotion on Android API24 emulator (I also tried API23 but the issue also exist for me). To facilitate your investigation, I also captured a video on my side for your reference:

https://drive.google.com/open?id=0B4yEJfH8ihrFTnltXzd1dFBNUGc

 

From the video, you can see that the list had "flipped" for 2 times after load more item and scrollToIndex was called.

 

Even though in your case, I saw that after load on demand, the list will scroll back to top, need to programmatically call scrollToIndex to scroll to the correct position. The behaviour is different from iOS (in iOS, I don't need to do it). It also recalled one of my issues I filed backed to Feb this year, which reported that when click to detail and then back, the list will scroll back to top:

http://www.telerik.com/forums/radlistview-on-android-(ns-2-5-1)---tap-to-detail-and-back-will-always-back-to-top-of-list

 

I can see that this issue still exist in NS 3.0.0. I personally feel that the above 2 issues are sort of the same thing, and cause the UX behaviour far less smooth than on iOS.

Let me know if you need more info from my side.

 

Best regards

Clarence

 

 

 

[Clarence]

One more thing, I updated the project a bit and you can pull the change from my sample project repo. Thx.

[Nick Iliev]

Hey Clarence Ho,

TO overcome this issue (using the code from your test project) we can take advantage of the Boolean property loadOnDemandInProgress which indicates if there is an ongoing operation for loading more items.
What we can do is to implement the Android code for scrollToIndex when the property is false (meaning when the load on demand operation is not active). This way we can assure this event won't be triggered when there are still items to be loaded and thus when the ngOnInit will be fired again.

e.g.

if (this.loadOnDemandInProgress) {
    this.itemList.notifyLoadOnDemandFinished();
    this.loadOnDemandInProgress = false;
} else {
    // this.loadOnDemandInProgress is false

    if (this.page.android) {
        // If current page > 1, scroll to index
        if (this.itemPagesLoaded > 1) {
            let toIndex = (this.itemPagesLoaded - 1) * this.pageSize;

            if (this.itemList.items && toIndex < this.itemList.items.length) {
                this.itemList.scrollToIndex(toIndex);
            }
        }
    }
}

With this change, we can also remove the setTimeOut delay as we will be sure that the ListView won't load any items at this very moment. Now at my side (tested on API19 and API23), the scrollToIndex will scroll to the wanted position right away with no double scrolling and reloading.

As a side note, doing operations that require view elements to be initialized in the visual tree can be done in ngAfterViewInit (the component class will need to implement AfterViewInit) in ngOnIinit. You can also use the native lifecycle events like loaded.

Regards,
Nikolay Iliev
Telerik by Progress

[Clarence]

Hi Nikolay,

 

Again, thanks a lot for your prompt response and detail explanation.

 

I modified the code as you mentioned and the RadListView work as expected.

 

Best regards

Clarence