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

Thread is closed for posting
6 posts, 1 answers
  1. Clarence
    Clarence avatar
    20 posts
    Member since:
    Nov 2016

    Posted 08 May 2017 Link to this post

    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

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 08 May 2017 Link to this post

    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
    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.
  3. Clarence
    Clarence avatar
    20 posts
    Member since:
    Nov 2016

    Posted 09 May 2017 in reply to Nikolay Iliev Link to this post

    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

     

     

     

  4. Clarence
    Clarence avatar
    20 posts
    Member since:
    Nov 2016

    Posted 09 May 2017 in reply to Clarence Link to this post

    One more thing, I updated the project a bit and you can pull the change from my sample project repo. Thx.
  5. Answer
    Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 09 May 2017 Link to this post

    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) instead in ngOnIinit. You can also use the native lifecycle events like loaded.

    Regards,
    Nikolay Iliev
    Telerik by Progress
    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.
  6. Clarence
    Clarence avatar
    20 posts
    Member since:
    Nov 2016

    Posted 09 May 2017 in reply to Nikolay Iliev Link to this post

    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

     

Back to Top