.NET MAUI DataPager Integration with CollectionView

You can page the data of the Telerik UI for .NET MAUI CollectionView and Microsoft .NET MAUI CollectionView by using the DataPager control.

Currently, the DataPager does not support the Telerik UI for .NET MAUI CollectionView LoadOnDemandCollection.

Example

Here is an example of how to use the DataPager with the CollectionView control.

1. Define the DataPager and the CollectionView in XAML:

• XAML

<Grid RowDefinitions="*, Auto">
    <telerik:RadCollectionView ItemsSource="{Binding PagedSource, Source={Reference dataPager}}"
                               DisplayMemberPath="Information" />
    <telerik:RadDataPager x:Name="dataPager"
                          Source="{Binding MyData}"
                          Grid.Row="1"
                          PageSize="20" />
    <Grid.BindingContext>
        <local:ViewModel />
    </Grid.BindingContext>
</Grid>

2. Add the following namespace:

• XAML

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

3. Define the ViewModel:

• C#

public class ViewModel
{
    public ViewModel()
    {
        var data = new ObservableCollection<Data>();
        for (int i = 0; i < 200; i++)
        {
            data.Add(new Data { Id = i, Number = i * 10 / 2, Information = "Information " + i });
        }

        MyData = data;
    }

    public ObservableCollection<Data> MyData { get; set; }
}

4. Define sample data:

• C#

public class Data
{
    public int Id { get; set; }
    public int Number { get; set; }
    public string Information { get; set; }
}

For the DataPager Integration example with Telerik and Microsoft MAUI CollectionView controls, go to the SDKBrowser Demo Application and navigate to the DataPager > Integration category.