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="&#xE806;" 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="&#xE80D;" />
                    </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.

See Also

• Filtering
• Sorting
• Selection