.NET MAUI CollectionView LoadOnDemand Command

The LoadOnDemandCommand (of type ICommand) is another alternative which you can use for loading data on demand. This alternative is suitable for MVVM scenarios.

Example

The following example demonstrates a simple setup that shows how to use the command:

1. Create a sample model:

• C#

public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
    public Gender Gender { get; set; }
}

2. Define the CollectionView control:

• XAML

<telerik:RadCollectionView ItemsSource="{Binding Items}"
                           DisplayMemberPath="Name"
                           IsLoadOnDemandEnabled="True"
                           IsLoadOnDemandActive="{Binding IsLoadOnDemandActive, Mode=TwoWay}"
                           LoadOnDemandCommand="{Binding LoadOnDemandCommand}">
    <telerik:RadCollectionView.BindingContext>
        <local:LoadOnDemandCommandViewModel />
    </telerik:RadCollectionView.BindingContext>
</telerik:RadCollectionView>

3. Add the telerik namespace:

• XAML

xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"

4. Create a ViewModel and define a command that is bound to the RadCollectionView.LoadOnDemandCommand property:

• C#

public class LoadOnDemandCommandViewModel : NotifyPropertyChangedBase
{
    private bool isLoadOnDemandActive;

    public LoadOnDemandCommandViewModel()
    {
        this.Items = new ObservableCollection<Person>();

        for (int i = 0; i < 20; i++)
        {
            this.Items.Add(new Person { Name = "Person " + i, Age = i + 10 });
        }

        this.LoadOnDemandCommand = new Command(async () =>
        {
            this.IsLoadOnDemandActive = true;

            IEnumerable<Person> newItems = await this.GetNewItems();
            foreach (var newItem in newItems)
            {
                this.Items.Add(newItem);
            }

            this.IsLoadOnDemandActive = false;
        });
    }

    public ObservableCollection<Person> Items { get; set; }

    public ICommand LoadOnDemandCommand { get; set; }

    public bool IsLoadOnDemandActive
    {
        get => this.isLoadOnDemandActive;
        set => this.UpdateValue(ref this.isLoadOnDemandActive, value);
    }

    private async Task<IEnumerable<Person>> GetNewItems()
    {
        List<Person> newItems = new List<Person>();
        int count = this.Items.Count;

        try
        {
            await Task.Delay(2000);

            for (int i = 0; i < 10; i++)
            {
                newItems.Add(new Person { Name = $"Loaded item: Person {count + i}", Age = i + 10 });
            }

            return newItems;
        }
        catch (Exception)
        {
            return null;
        }
    }
}

This is the result:

For a runnable example demonstrating the CollectionView LoadOnDemand Command, see the SDKBrowser Demo Application and go to CollectionView > Load On Demand category.