New to Telerik UI for .NET MAUI? Start a free 30-day trial


The DataGrid provides a programmatic approach for grouping its data based on specific criteria.

Programmatic Grouping

Programmatic grouping can be done by adding descriptors to the GroupDescriptors collection. There are two types of descriptors:

All GroupDescriptors are located in the Telerik.XamarinForms.Common.Data namespace:


Property Group Descriptor

The PropertyGroupDescriptor is used to group the data in a DataGrid by property from the class that defines your objects.

To use the PropertyGroupDescriptor, you have to set its PropertyName (string) property, which gets or sets the name of the property that is used to retrieve the key by which to group.

You can sort the groups in ascending or descending order by using the SortOrder property.

Let's, for example, have the following business object:

public class Person
    public string Name { get; set; }
    public int Age { get; set; }
    public string Department { get; set; }

Add a sample ViewModel class with a collection of Person objects:

public class ViewModel
    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 = "Production" },
            new Person { Name = "Elena", Age = 37, Department = "Accounting and Finance"},
            new Person { Name = "Ross", Age = 30, Department = "Marketing" },

    public ObservableCollection<Person> People { get; set; }

Define the DataGrid:

<telerik:RadDataGrid x:Name="dataGrid"
                     ItemsSource="{Binding People}">
            <HorizontalStackLayout Margin="5,0,0,0" VerticalOptions="Center" >
                <Label Text="Employees working in: " 
                       FontSize="Small" />
                <Label Text="{Binding Group.Key}" 
                       FontSize="Small" />

All that is left is to set is the ViewModel as BindingContext of the page:

this.BindingContext = new ViewModel();

Apply the PropertyGroupDescriptor:

this.dataGrid.GroupDescriptors.Add(new Telerik.XamarinForms.Common.Data.PropertyGroupDescriptor()

Here is how the DataGrid looks when it is grouped:

Delegate Group Descriptor

The difference between the DelegateGroupDescriptor and the PropertyGroupDescriptor is that the DelegateGroupDescriptor groups data by a custom key, while the PropertyGroupDescriptor groups by a defined key which is a property from the model.

You have to set the KeyLookup property of the DelegateGroupDescriptor, which gets or sets the IKeyLookup instance that is used to retrieve the group key for each data item.

You can sort the groups in ascending or descending order by using the SortOrder property.

You have to create a class that implements the IKeyLookup interface which will return the key by which you want to group. Then, you need to add the DelegateGroupDescriptor to the RadDataGrid.GroupDescriptors collection and set its KeyLookup property.

The following example demonstrates a sample IKeyLookup implementation:

class CustomIKeyLookup : Telerik.Maui.Controls.Compatibility.Common.Data.IKeyLookup
    public object GetKey(object instance)
        var item = instance as Person;
        return item?.Name[0];

Add it to the GroupDescriptors collection of the RadDataGrid instance:

this.dataGrid.GroupDescriptors.Add(new DelegateGroupDescriptor() { KeyLookup = new CustomIKeyLookup() });

Here is how the DataGrid looks when it is grouped through a DelegateGroupDescriptor:

Expand and Collapse Groups

The DataGrid supports group expand and collapse operations either through the UI by tapping on the group headers, or programmatically. By default, all the groups are expanded.

This section provides an overview of the methods and commands used to control the expand/collapse state of the DataGrid groups.

Get the Grouped DataGrid Items

To manipulate the collapsible DataGrid groups, first you will need to call its GetDataView method. In short, the GetDataView method provides a view of the ItemsSource after all the sorting, grouping, and filtering operations are applied. The return type is IDataViewCollection which exposes the expand and collapse methods described in the following sections.

var dataView = this.dataGrid.GetDataView();

Expand and Collapse All Groups

To expand all groups, use the ExpandAll method and, respectively, the CollapseAll method to collapse all groups.

//expand all
var dataView = this.dataGrid.GetDataView();

//collapse all
var dataView = this.dataGrid.GetDataView();

Expand and Collapse Specific Groups

You can retrieve the first-level groups through the GetGroups method of the IDataViewCollection object and use ExpandGroup/CollapseGroup to make a certain group to expand or collapse respectively. You can check whether a group is expanded trough the GetIsExpanded method.

The following example demonstrates how these methods are used:

var dataView = this.dataGrid.GetDataView();
var rootGroups = dataView.GetGroups();

var isFirstExpanded = dataView.GetIsExpanded(rootGroups.First());
//expand a certain group
//collapse a certain group

Additionally, IDataViewCollection provides the ExpandItem/CollapseItem methods that take a data item as a parameter and expand/collapse the immediate group containing this item.

var lastItem = (dataGrid.ItemsSource as IEnumerable<City>).Last();
var dataView = this.dataGrid.GetDataView();

See Also

In this article
Not finding the help you need?