Load On Demand

Loading a large data set on a mobile device has its chalenges. On of the most popular aproach is using incremental data loading as the items needs to be visualized. RadListView is capable of doing this using its load on demand capabilitites enabled by its IsLoadOnDemandEnabled property. It offers two loading modes through its LoadOnDemandMode property:

  1. Automatic - the data is requested automatically when you scroll near the end of the listview.
  2. Manual - a button is rendered at the end of the listview. The data is requested explicitely by pressing the button.

In order to load the data Listview requires either to:

  1. Subscribe to LoadOnDemand event and add the loaded data to the source.
  2. Create ListViewLoadOnDemandCollection instance as source and pass it to listview ItemsSource property.

Automatic mode

We will load the data automatically using event. In this case Here is how the setup will look like:

Define the listview in xaml

We use the following snippet:

<telerikDataControls:RadListView x:Name="listView"
                                 IsLoadOnDemandEnabled="True"
                                 LoadOnDemandMode="Automatic"
                                 LoadOnDemand="ListView_LoadOnDemand"/>

We would also need to define the listview namespace:

xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"

Add the code to load the data in the LoadOnDemand event

First, we set listview itemsSource in page constructor:

var source = new ObservableCollection<string>();
for (int i = 0; i < 14; i++)
{
    source.Add(string.Format("Item {0}", i));
}
this.listView.ItemsSource = source;

Then We use the following snippet:

private int lodItemsCount = 0;

private void ListView_LoadOnDemand(object sender, EventArgs e)
{
    this.lodItemsCount++;
    foreach (string item in Enum.GetNames(typeof(DayOfWeek)))
    {
        (listView.ItemsSource as ObservableCollection<string>).Add(string.Format("LOD: {0} - {1}", lodItemsCount, item));
    }
}

Manual loading mode

Alternatively you can request items only explicitely when pressing the load more button rendered at the end of the loaded items.

Define the listview in xaml with manual loading mode

We use the following snippet:

<telerikDataControls:RadListView x:Name="listView" IsLoadOnDemandEnabled="True" LoadOnDemandMode="Manual" ItemsSource="{Binding Source}"  LoadOnDemand="ListView_LoadOnDemand"/>

We would also need to define the listview namespace

xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"

Add the code to load the data in the LoadOnDemand event

First, we set listview itemsSource in page constructor:

var source = new ObservableCollection<string>();
for (int i = 0; i < 14; i++)
{
    source.Add(string.Format("Item {0}", i));
}
this.listView.ItemsSource = source;

Then, we use the following snippet:

private int lodTriggerCount = 0;

private void ListView_LoadOnDemand(object sender, EventArgs e)
{
    this.lodTriggerCount++;
    foreach (string item in Enum.GetNames(typeof(DayOfWeek)))
    {
        (listView.ItemsSource as ObservableCollection<string>).Add(string.Format("LOD: {0} - {1}", lodTriggerCount, item));
    }
}

Figure 1: Manual Loading on demand

ManualLoadOnDemand

Loading mode with collection

In many sceanarios you would like to control the loading of the data directly from our viewmodel. For these cases you can take advantage of our ListViewLoadOnDemandCollection that takes case of reqesting new items internally. It can work both in Manual and Automatic mode. Let's see the setup for Automatic loading mode using the collection.

Define the listview in xaml

Define the listview in xaml and bind its ItemsSource to the data in the viewmodel.

<telerikDataControls:RadListView x:Name="listView" IsLoadOnDemandEnabled="True" LoadOnDemandMode="Automatic" ItemsSource="{Binding Source}"/>

We would also need to define the listview namespace

xmlns:telerikDataControls="clr-namespace:Telerik.XamarinForms.DataControls;assembly=Telerik.XamarinForms.DataControls"

Define the Viewmodel

We use the following snippet:

public class ListViewModel
{
    public ListViewLoadOnDemandCollection Source { get; set; }
    private int lodTriggerCount;
    public ListViewModel()
    {
        this.Source = new ListViewLoadOnDemandCollection((cancelationToken) =>
        {
            List<string> result = new List<string>();

            try
            {
                //simulates connection latency
                Task.Delay(4000, cancelationToken).Wait();

                this.lodTriggerCount++;
                foreach (string item in Enum.GetNames(typeof(DayOfWeek)))
                {
                    result.Add(string.Format("LOD: {0} - {1}", lodTriggerCount, item));
                }
                return result;
            }
            catch (Exception ex)
            {
                //exception is thrown when the task is canceled. Returning null does not affect the ItemsSource.
                return null;
            }
        });

        for (int i = 0; i < 14; i++)
        {
            Source.Add(string.Format("Item {0}", i));
        }
    }
}

Bind the BindingContext

We use the following snippet in the page constructor:

this.BindingContext = new ListViewModel();

Advanced options

Control the number of preloaded items

This feature works in conjunction with LoadOnDemandMode.Automatic mode of the listview. You can control the number of minimum items loaded ahead through listview LoadOnDemandBufferItemsCount property. By default it is set to 10 item. When the listview requests an item in the buffer it will trigger new loading batch.

Change the appearance of Manual load button

This feature works in conjunction with LoadOnDemandMode.Manual mode of the listview You can control load more button content through the LoadOnDemandItemTemplate property.

<telerikDataControls:RadListView.LoadOnDemandItemTemplate>
  <DataTemplate>
    <Grid BackgroundColor="Red">
      <Label TextColor="Black" Text="Load more items" FontSize="24" HorizontalOptions="Center" />
    </Grid>
  </DataTemplate>
</telerikDataControls:RadListView.LoadOnDemandItemTemplate>

Change the appearance of Manual loading indicator

This feature works in conjunction with LoadOnDemandMode.Manual mode of the listview You can control the loadinf indicator content through the LoadingOnDemandItemTemplate property.

<telerikDataControls:RadListView.LoadingOnDemandItemTemplate>
  <DataTemplate>
    <Grid BackgroundColor="Green" >
      <Label TextColor="White" Text="Loading..." FontSize="24" HorizontalOptions="Center"/>
    </Grid>
  </DataTemplate>
</telerikDataControls:RadListView.LoadingOnDemandItemTemplate>