.NET MAUI CollectionView Refresh Data
Some lists contain items that may change after the initial load. The pull-to-refresh functionality allows the user to manually trigger an update of the list.
You can achieve a pull-to-refresh functionality in Telerik .NET MAUI CollectionView by using the Microsoft .NET MAUI RefreshView.
Example
The following example demonstrates how to use the .NET MAUI RefresView with RadCollectionView.
1. Define the RefreshView and RadCollectionView in XAML:
<RefreshView IsRefreshing="{Binding IsRefreshing}"
Command="{Binding RefreshCommand}">
<telerik:RadCollectionView ItemsSource="{Binding People}">
<telerik:RadCollectionView.ItemTemplate>
<DataTemplate>
<VerticalStackLayout Spacing="2" Margin="5"
Padding="{Binding Source={RelativeSource AncestorType={x:Type telerik:RadCollectionViewItemView}}, Path=ActualPadding}">
<Label Text="{Binding Name, StringFormat='Name: {0}, '}"
VerticalTextAlignment="Center" />
<Label Text="{Binding Age, StringFormat='Age: {0}'}"
VerticalTextAlignment="Center" />
</VerticalStackLayout>
</DataTemplate>
</telerik:RadCollectionView.ItemTemplate>
</telerik:RadCollectionView>
<RefreshView.BindingContext>
<local:ViewModel />
</RefreshView.BindingContext>
</RefreshView>
2. Add the following namespaces:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
3. Define a sample business model:
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
public string Department { get; set; }
}
4. Add the ViewModel:
public class ViewModel : NotifyPropertyChangedBase
{
private bool isRefreshing;
public ViewModel()
{
this.People = new ObservableCollection<Person>()
{
new Person { Name = "Kiko", Age = 23, Department = "Production" },
new Person { Name = "Jerry", Age = 23, Department = "Accounting and Finance" },
new Person { Name = "Ethan", Age = 51, Department = "Marketing" },
new Person { Name = "Isabella", Age = 25, Department = "Marketing" },
new Person { Name = "Joshua", Age = 45, Department = "Production" },
new Person { Name = "Logan", Age = 26, Department = "Production"},
new Person { Name = "Aaron", Age = 32, Department = "Sales" },
new Person { Name = "Elena", Age = 37, Department = "Accounting and Finance" },
new Person { Name = "Ross", Age = 30, Department = "Marketing" },
new Person { Name = "Jane", Age = 45, Department = "Production" },
new Person { Name = "Luke", Age = 26, Department = "Marketing"},
new Person { Name = "Tommy", Age = 32, Department = "Sales" },
new Person { Name = "Juan", Age = 37, Department = "Accounting and Finance" },
new Person { Name = "Kate", Age = 30, Department = "Marketing" },
new Person { Name = "William", Age = 23, Department = "Sales" },
new Person { Name = "Zach", Age = 23, Department = "Accounting and Finance" },
new Person { Name = "Ivan", Age = 51, Department = "Sales" },
new Person { Name = "Helena", Age = 25, Department = "Marketing" },
};
this.RefreshCommand = new Command(async () =>
{
this.IsRefreshing = true;
await Task.Delay(1000);
var startIndex = this.People.Count;
var endIndex = this.People.Count + 10;
int i = 0;
for (int itemIndex = startIndex; itemIndex < endIndex; itemIndex++)
{
this.People.Insert(i, new Person { Name = "Name " + itemIndex, Age = (itemIndex * 2) + 1, Department = "Department " + itemIndex });
i++;
}
this.IsRefreshing = false;
});
}
public bool IsRefreshing
{
get => this.isRefreshing;
set => this.UpdateValue(ref this.isRefreshing, value);
}
public ICommand RefreshCommand { get; set; }
public ObservableCollection<Person> People { get; set; }
}
This is the result on Android:
