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.
There are two types of grouping, using:
PropertyGroupDescriptor
DelegateGroupDescriptor
PropertyGroupDescriptor
You can group the data by a property value from the class that defines your items. This descriptor exposes the following properties:
-
PropertyName
—Defines the string name of the property you want to group by. -
SortOrder
—Defines the sort order in each group to Ascending or Descending.
Add the following business object:
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" }
};
}
}
Group the Cities by the Country
property through the PropertyGroupDescriptor
:
<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.GroupDescriptors>
<telerik:PropertyGroupDescriptor PropertyName="Country"/>
</telerik:RadListView.GroupDescriptors>
</telerik:RadListView>
Add the Templates
definition in the page resources:
<ResourceDictionary>
<DataTemplate x:Key="ListViewItemTemplate">
<telerik:ListViewTemplateCell>
<telerik:ListViewTemplateCell.View>
<Grid HeightRequest="40" Padding="28, 0, 0, 0">
<Label Text="{Binding Name}" TextColor="#6F6F70" FontSize="Small" VerticalOptions="Center" />
</Grid>
</telerik:ListViewTemplateCell.View>
</telerik:ListViewTemplateCell>
</DataTemplate>
<DataTemplate x:Key="ListViewGroupHeaderTemplate">
<Grid HeightRequest="40" BackgroundColor="#F1F2F5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto" />
<ColumnDefinition />
</Grid.ColumnDefinitions>
<Label Text="" Margin="8, 0, 0, 0" TextColor="DarkGray" FontFamily="TelerikFontExamples" FontSize="Medium" VerticalOptions="Center">
<Label.Triggers>
<DataTrigger TargetType="Label" Binding="{Binding IsExpanded}" Value="True">
<Setter Property="Text" Value="" />
</DataTrigger>
</Label.Triggers>
</Label>
<Label Margin="8, 0, 0, 0" Text="{Binding }" Grid.Column="1" TextColor="DarkGray" FontSize="Medium" VerticalOptions="Center" />
</Grid>
</DataTemplate>
<telerik:ListViewGroupStyle x:Key="ListViewGroupHeaderStyle" BackgroundColor="Transparent" />
</ResourceDictionary>
Include the telerik
namespace:
xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui"
For the ListView PropertyGroupDescriptor example, go to the SDKBrowser Demo Application and navigate to ListView -> Grouping category.