RadListView on iOS (NS 3.0.0, UI 2.0.1) - load on demand - scrollToIndex not work

[Clarence]

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

 

However, when I run the app on iOS, after loaded more items and scrollToIndex, found that when drag to scroll, the list view will scroll to another position first.

 

Steps to re-produce:

• Clone the sample project (https://github.com/skywidesoft/ns-radlistview-test.git)
• tns run ios --emulator
• Scroll to end and click load more items
• Click on Item 9 and drag up
• The list will scroll back to Item 6 first before it can row down for additionally loaded items

 

Kindly advice

Clarence

 

[Nick Iliev]

Hi Clarence,

First of all, thank you for the great test projects - they were really helpful to reproduce the issues at our side.
Now straight to the point - I have played with your implementation and was able to overcome this issue,
There are a couple of reasons creating this "jumping" behavior and the most important of them is that in order for the LoadOnDemand to work in iOS you will need itemHeightЕ set for your RadListView.  The second part of the issue is related to the usage of scrollToIndex in your code which was overwriting the default scrolling behavior provided by LoadOnDemand by design. In the lines below I will cover both issues and show you how to overcome them so that the LoadOnDemand to work as expected in iOS.

1.) The iOS-specific code for the itemHeight property

While we are not obligated to set itemHeight in Android for iOS this is a mandatory setting to enable LoadOnDemand. Here is how we have made it in our own SDK example. Note that this line was explicitly enabled only for iOS using this custom directive for platform detection (which on the other hand needed to be declared in your NgModule file like done here). Using this directive allows us to use this code only for iOS instead for both Android and iOS.

2.)  Removing the additional jump behavior.

Now that we have introduced the itemHeight for iOS the loadOnDemand works better with your example but there is still unwanted jumping when the items are loaded and the user starts to scroll. This is caused by these code lines which are n conflict with the logic implemented by the LoadOnDemnad itself. Simply removing them will make your LoadOnDemand to work as expected with no side effects.

To resume all of the above in three simple steps:

- add this in your RadListView

<ListViewLinearLayout tkListViewLayout itemHeight="120"></ListViewLinearLayout>

- remove these lines.
- rebuild your application and LoadOnDemand should work as expected.

Regards,
Nikolay Iliev
Telerik by Progress

[Clarence]

Dear Nikolay,

 

Thanks a lot for your prompt and detail explanation of the issue.

 

I notice the code you mentioned when I study the example code, but just not realize it's important for the platform specific scrolling behavior. I followed your instruction and the load on demand feature on iOS is working as expected.

 

BTW, I found that on Android, I still need the code for scrollToIndex after load more items. So instead of remove the code, I wrap the code and run it only when on Android platform.

 

Best regards

Clarence