Load on Demand
Loading a large data set on a mobile device has its challenges. One of the most popular approaches is using incremental data loading when the items need to be visualized. RadListView does this by using its load-on-demand functionality.
Configuration
The following properties control the LoadOnDemand feature:
- IsLoadOnDemandEnabled(bool) - used to enable the load on demand mechanism of RadListView.
-
IsLoadOnDemandActive (bool) - used to control the loading indicator that is rendered when the data is retrieved asynchronously. Set it to
True
when an async operation is running and items are loading. Set it toFalse
when the items are loaded. -
LoadOnDemandMode - used to set the loading mode. You can select between:
- Automatic - the data is requested automatically when you scroll near the end of the ListView.
- Manual - a button is rendered at the end of the ListView. The data is requested explicitly by pressing the button.
Methods to Load Data on Demand
There are three ways to load the data on demand, regardless of whether you use the Automatic or Manual loading mode:
- Create a ListViewLoadOnDemandCollection instance as a source and pass it to the ListView ItemsSource property.
- Subscribe to the LoadOnDemand event and add the loaded data to the source.
- Use the LoadOnDemand UserCommand and add the loaded data to the source.
All three approaches for loading items on demand in ListView work with both Automatic and Manual LoadOnDemandMode.
Using LoadOnDemandCollection
To load items on demand, you can utilize the ListViewLoadOnDemandCollection and set it as ItemsSource for ListView. The ListViewLoadOnDemandCollection accepts an action in the constructor and this action is later executed by the ListView in a non-UI thread when new items are requested.
The example below demonstrates how to use LoadOnDemandCollection:
-
Define a sample ViewModel class with Source property of type ListViewLoadOnDemandCollection:
-
Define RadListView instance and bind its ItemsSource to the data in the viewmodel:
-
Define the ListView namespace:
-
Set the ViewModel as BindingContext in the page constructor:
Using LoadOnDemand Event
Another way to handle loading more items is to use the LoadOnDemand event. This event is being raised on a UI thread, so in the event handler you can add items right away or asynchronously:
- In case the data is available right away, add the items to the ListView ItemsSource in the LoadOnDemand event handler.
- In case you require an async operation, set the IsLoadOnDemandActive property of the ListView to
True
. This notifies the ListView that it must display the loading indicator. Then an async call can be initiated to get the data. When the new items are ready, you must set the IsLoadOnDemandActive property toFalse
again to notify the ListView that the load-on-demand operation is completed.
The example below demonstrates how to use the LoadOnDemand event:
-
Define ListView:
-
Define the ListView namespace:
-
Set ListView itemsSource in page constructor:
- Add the following event handler:
Using LoadOnDemand Command
This approach is similar to using the LoadOnDemand event, but in this case, the load-on-demand is handled in the ViewModel through the LoadOnDemandUserCommand exposed by RadListView. In the Execute method of the command, you can add items right away or asynchronously:
- In case the data is available right away, add the items to the ListView ItemsSource in the LoadOnDemand command Execute method.
- In case you require an async operation, set the IsLoadOnDemandActive property of the ListView to
True
. This notifies the ListView that it must display the loading indicator. Then an async call can be initiated to get the data. When the new items are ready, you must set the IsLoadOnDemandActive property toFalse
again to notify the ListView that the load-on-demand operation is completed. You can control the behavior of IsLoadOnDemandActive through a binding to a boolean property in the ViewModel class.
The example below demonstrates how to use the LoadOnDemand command:
-
Create a ViewModel class with a LoadItemsCommand as well as IsLoadingMoreItems bool property:
-
Define the RadListView instance in XAML with the ListViewUserCommand defined as well as the IsLoadOnDemandActive property bound to the boolean property in the ViewModel:
- Define the following namespaces:
- Set the ViewModel as BindingContext in the page constructor:
Advanced Options
Control the Number of Preloaded Items
This feature works in conjunction with the LoadOnDemandMode.Automatic mode of the ListView. You can control the minimum number of items loaded ahead through ListView's LoadOnDemandBufferItemsCount property. By default, it is set to 10 items. When ListView requests an item in the buffer, it will trigger a new loading batch.
Change the Appearance of the Manual Load Button
This feature works in conjunction with the LoadOnDemandMode.Manual mode of the ListView. You can control the content of the Load More Button through the LoadOnDemandItemTemplate property.
Change the Appearance of the Manual Loading Indicator
This feature works in conjunction with the LoadOnDemandMode.Manual mode of the ListView. You can control the content of the Loading Indicator through the LoadingOnDemandItemTemplate property.