RadListView Load More on Scroll Up Feature

[Ericky]

Hello,

Is there a feature that allows the list to load more items when it is scrolled to the first element rather than the last? I'm working on a chat app and something like this would be very helpful.

Thanks.

[Nick Iliev]

Hello ,

One possible solution that you can use is to set the loadOnDemandMode to Auto (using loadOnDemandBufferSize) and then in the loadMoreDataRequested callback method not to push your items but to unshift them (put the in the begging of the array) and in the same time scroll to the new initial position.
This way the messages will appear on the top of your chat and will push the older ones to the bottom.To demonstrate the idea you can take this example and change this line to use unshift and then on this line you can scroll to the initial index.

listView.scrollToIndex(0);

Regards,
Nikolay Iliev
Progress Telerik

[Ericky]

Hi Nokalay,

Thanks for the reply. But, is there any way you can give me an example of how to use "loadOnDemandBufferSize"? No matter which value I set it to, the event "loadMoreDataRequested" always fires when I reach the end of the list.

[Ericky]

Hi Nikolay,

Thanks for the reply. Is there any way you can give me an example of using "loadOnDemandBufferSize"? No matter which value I set it to, the "loadMoreDataRequested" event is always fired when the scroll position reaches the end of the list.

[Nick Iliev]

Hello ,

You can use as a reference this example. The example is written with Manual mode and the buffer only works in Auto mode so you need to make the following change:

<lv:RadListView items="{{ dataItems }}"  row="0" loadOnDemandMode="Auto" loadOnDemandBufferSize="3" loadMoreDataRequested="{{onLoadMoreItemsRequested}}">

Now with this code, the list will execute loadOnDemand when there are less than 3 items left to scroll. On the initial run, it will be triggered automatically as there are only 6 items at the start and 5 are already visible.

Regards,
Nikolay Iliev
Progress Telerik