The
RadListView
control is now obsolete and will be removed in the future. Use the RadCollectionView control instead. TheRadCollectionView
is a complete, ground-up rewrite of the ListView. TheRadCollectionView
offers improved performance, enhanced features, and a modernized approach to managing lists of data. TheRadCollectionView
incorporates all of the ListView's key features. More about the differences between both components and how to migrate to the newRadCollectionView
is available in the Migrating the Telerik .NET MAUI RadListView to RadCollectionView article.
.NET MAUI ListView Sorting
The ListView can be used to sort the visualized data. This can be achieved by adding different SortDescriptors
to its SortDescriptors
collection. There are two types of descriptors shipped with our code.
PropertySortDescriptor
You can sort the data by a property value from the class that defines your business items. This descriptor exposes the following properties:
-
PropertyName
—Defines the string name of the property that is used to retrieve the key to sort by. -
SortOrder
—Specifies sort order to ascending or descending.
DelegateSortDescriptor
This descriptor enables you to sort by a custom key (for example, some complex expression combining two or more properties) instead of being limited by the value of a single property. This descriptor exposes the following properties:
-
SortOrder
—Sets the sort order to ascending or descending. -
Comparer
—Defines theCompare
method used by the internal IComparer.
Example
Here is an example that will guide you how to use SortDescriptor
in the ListView.
1. Define the ListView in XAML and add PropertySortDescriptor
to its SortDescriptors
collection :
<telerik:RadListView x:Name="listView"
ItemsSource="{Binding Items}">
<telerik:RadListView.BindingContext>
<local:ViewModel/>
</telerik:RadListView.BindingContext>
<telerik:RadListView.SortDescriptors>
<telerik:ListViewPropertySortDescriptor PropertyName="Age"
SortOrder="Ascending" />
</telerik:RadListView.SortDescriptors>
<telerik:RadListView.ItemTemplate>
<DataTemplate>
<telerik:ListViewTemplateCell>
<telerik:ListViewTemplateCell.View>
<HorizontalStackLayout>
<Label Text="Name:"/>
<Label Text="{Binding Name}"/>
<Label Text=", Age:"/>
<Label Text="{Binding Age}"/>
</HorizontalStackLayout>
</telerik:ListViewTemplateCell.View>
</telerik:ListViewTemplateCell>
</DataTemplate>
</telerik:RadListView.ItemTemplate>
</telerik:RadListView>
2. Use the following snippet for the ViewModel
class:
public class ViewModel
{
public ViewModel()
{
this.Items = GetData();
}
public ObservableCollection<Person> Items { get; set; }
private static ObservableCollection<Person> GetData()
{
var items = new ObservableCollection<Person>();
items.Add(new Person { Name = "Tom", Age = 41 });
items.Add(new Person { Name = "Anna", Age = 32 });
items.Add(new Person { Name = "Peter", Age = 28 });
items.Add(new Person { Name = "Teodor", Age = 39 });
items.Add(new Person { Name = "Lorenzo", Age = 25 });
items.Add(new Person { Name = "Andrea", Age = 33 });
items.Add(new Person { Name = "Martin", Age = 36 });
items.Add(new Person { Name = "Alexander", Age = 29 });
items.Add(new Person { Name = "Maria", Age = 22 });
items.Add(new Person { Name = "Elena", Age = 27 });
items.Add(new Person { Name = "Stefano", Age = 44 });
items.Add(new Person { Name = "Jake", Age = 31 });
items.Add(new Person { Name = "Leon", Age = 28 });
return items;
}
}
3. Define a Person
class:
public class Person
{
public string Name { get; set; }
public int Age { get; set; }
}
The following image shows the result once the data is sorted.
Bindable Sort Descriptors
The SortDescriptors
collection of the ListView supports binding, which means you can modify the sort descriptors directly from the ViewModel
.
To control the descriptors collections through MVVM:
1. Create a property of type ObservableCollection<SortDescriptorBase>
in your ViewModel
which will contain the needed sort descriptors:
public ObservableCollection<SortDescriptorBase> SortDescriptors
{
get
{
return this.sortDescriptors;
}
set
{
if (this.sortDescriptors != value)
{
this.sortDescriptors = value;
OnPropertyChanged();
}
}
}
OneWayToSource
binding mode to bind that property to the SortDescriptors
property of ListView. For demonstration purposes, this ListView uses the same ViewModel
as in the previous example.
<telerik:RadListView x:Name="listView"
Grid.Row="2"
SortDescriptors="{Binding SortDescriptors, Mode=OneWayToSource}"
ItemsSource="{Binding Items}">
<telerik:RadListView.ItemTemplate>
<DataTemplate>
<telerik:ListViewTemplateCell>
<telerik:ListViewTemplateCell.View>
<HorizontalStackLayout>
<Label Text="Name:"/>
<Label Text="{Binding Name}"/>
<Label Text=", Age:"/>
<Label Text="{Binding Age}"/>
</HorizontalStackLayout>
</telerik:ListViewTemplateCell.View>
</telerik:ListViewTemplateCell>
</DataTemplate>
</telerik:RadListView.ItemTemplate>
</telerik:RadListView>
3. According to your preferences, add sort descriptors to the SortDescriptors
collection in the ViewModel
, for example:
private void UpdateExistingSortDescriptor()
{
if (this.SortDescriptors == null)
return;
if (this.SortDescriptors.Count == 0)
{
this.SortDescriptors.Add(new PropertySortDescriptor()
{
PropertyName = "Day",
SortOrder = SortOrder.Ascending
});
}
}
The following image shows the result: