RadListView Load More on Scroll Up Feature

Thread is closed for posting
5 posts, 0 answers
  1. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 06 Jun 2017 Link to this post

    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.

  2. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 07 Jun 2017 Link to this post

    Hello Ericky,

    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
    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. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 07 Jun 2017 Link to this post

    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.

  4. Ericky
    Ericky avatar
    49 posts
    Member since:
    Jun 2017

    Posted 07 Jun 2017 Link to this post

    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.

  5. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    351 posts

    Posted 07 Jun 2017 Link to this post

    Hello Ericky,

    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
    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.
Back to Top