RadListView: Load on Demand

The load-on-demand feature is particularly useful in cases when data needs to be loaded in chunks (pages) to optimize bandwidth usage and improve the UX. There are two load-on-demand modes available:

  • Manual - in this mode the user needs to manually request the next data page
  • Auto - in this mode the next data page is automatically requested as the user approaches the end of the scrollable list

When more items need to be loaded, RadListView fires the loadMoreDataRequestedEvent event.

In addition, RadListView exposes the loadOnDemandBufferSize property which determines the count of items left to scroll which when reached triggers a loadMoreDataRequestedEvent event. This property is used when the load-on-demand mode is set to be Auto.

Handling the loadMoreDataRequested Event

The following code snippet demonstrates how the loadMoreDataRequestedEvent event is handled. We first need to subscribe for the event as the following XML snippet shows:

Example 1: Subscribing for loadMoreDataRequested in XML:

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

in our event handler we make a data request and when the data chunk is ready we feed the list:

Example 2: Handling the loadMoreDataRequested in XML:

public onLoadMoreItemsRequested(args: ListViewEventData) {
    var that = new WeakRef(this);
    timer.setTimeout(function() {
        var listView: RadListView = args.object;
        var initialNumberOfItems = that.get()._numberOfAddedItems;
        for (var i = that.get()._numberOfAddedItems; i < initialNumberOfItems + 2; i++) {
            if (i > posts.names.length - 1) {
                listView.loadOnDemandMode = ListViewLoadOnDemandMode[ListViewLoadOnDemandMode.None];
                break;
            }
            var imageUri = application.android ? posts.images[i].toLowerCase() : posts.images[i];
            that.get().dataItems.push(new DataItem(posts.names[i], posts.titles[i], posts.text[i], "res://" + imageUri));
            that.get()._numberOfAddedItems++;
        }

        listView.notifyLoadOnDemandFinished();
    }, 1000);
    args.returnValue = true;
}

Here, the usage of a timer is for the purpose of simulating a call to a remote service. The notifyLoadOnDemandFinished() call is made to inform the list view that the requested data chunk has been delivered.

Customizing the Load-on-Demand View

To customize the load-on-demand view displayed at the end of the list you need to use the loadOnDemandItemTemplate property. Here's a simple example:

Example 3: Providing a custom loadOnDemandItemTemplate:

<lv:RadListView.loadOnDemandItemTemplate>
    <GridLayout style="background-color: #7fff7f;">
         <Label text="Load More" horizontalAlignment="center" verticalAlignment="center"/>
    </GridLayout>
</lv:RadListView.loadOnDemandItemTemplate>

The loadOnDemandItemTemplate property is used just like the itemTemplate property. Note that the binding context of the view generated from this template is the one assigned to the page.

References

Want to see this scenario in action?
Check our SDK examples repo on GitHub. You will find this and many other practical examples with NativeScript UI.

Related articles you might find useful: