Grouping
The ListView provides the functionality to programmatically group its data at runtime. This can be achieved through adding GroupDescriptors
to the RadListView.GroupDescriptors
collection.
PropertyGroupDescriptor
DelegateGroupDescriptor
DelegateGroupDescriptor
This descriptor enables you to group by a custom key (e.g. 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:
-
KeyExtractor
—Defines the(Func<object, object)
delegate which returns the property to retrieve the group key for each data item. -
SortOrder
—Defines the sort order in each group to Ascending or Descending.
Let's use the same example from the previous section, just add DelegateGroupDescriptor through code instead.
Define the RadListView
:
<telerik:RadListView x:Name="listView"
ItemsSource="{Binding Cities}"
ItemTemplate="{StaticResource ListViewItemTemplate}"
GroupHeaderTemplate="{StaticResource ListViewGroupHeaderTemplate}"
GroupHeaderStyle="{StaticResource ListViewGroupHeaderStyle}">
<telerik:RadListView.BindingContext>
<local:GroupingViewModel/>
</telerik:RadListView.BindingContext>
</telerik:RadListView>
Include the telerik
namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
Create and apply a delegate for grouping the items (for example by their first letter) as following:
public DelegateGrouping()
{
InitializeComponent();
var delegateDescriptor = new DelegateGroupDescriptor
{
KeyExtractor = FirstLetterKeyExtractor
};
listView.GroupDescriptors.Add(delegateDescriptor);
}
private object FirstLetterKeyExtractor(object arg)
{
var item = arg as City;
return item?.Name.Substring(0, 1);
}
Add a business model:
public class City
{
public string Continent { get; set; }
public string Name { get; set; }
public string Country { get; set; }
}
Add a ViewModel
with a collection of Cities:
public class GroupingViewModel : NotifyPropertyChangedBase
{
public ObservableCollection<City> Cities { get; set; }
public GroupingViewModel()
{
this.Cities = new ObservableCollection<City>()
{
new City() { Name = "Barcelona", Country = "Spain", Continent = "Europe"},
new City() { Name = "Madrid", Country = "Spain", Continent = "Europe" },
new City() { Name = "Rome", Country = "Italy", Continent = "Europe" },
new City() { Name = "Florence", Country = "Italy", Continent = "Europe" },
new City() { Name = "London", Country = "England", Continent = "Europe" },
new City() { Name = "Manchester", Country = "England", Continent = "Europe"},
new City() { Name = "New York", Country = "USA", Continent = "North America" },
new City() { Name = "Boston", Country = "USA", Continent = "North America" }
};
}
}
The following image shows a ListView grouped through the DelegateGroupDescriptor
.
For the ListView DelegateGroupDescriptor example, go to the SDKBrowser Demo Application and navigate to ListView -> Grouping category.