New to Kendo UI for Angular? Start a free 30-day trial

Angular Data Grid Grouping Basics

The Grid enables you to display grouped table data. You can configure the component to group the data by single or multiple fields during the Grid initialization or let the user dynamically group the data through interactions with the component.

To group the data, the user drags a column header to the group panel. As a result, the Grid creates groups based on the available values in that column.

You can enable the grouping feature by using two methods:

Using the Data-Binding Directive

When you use the built-in DataBindingDirective, the Grid can automatically group the data for you. To enable the grouping when the kendoGridBinding directive is applied:

  1. Set the groupable property of the Grid.

  2. (Optional) Set the group property to a GroupDescriptor object. This allows you to initially group the data or sort the groups in ascending or descending order.

    The order of the groups follows the default order of the field data type.

<kendo-grid
    [kendoGridBinding]="gridData"
    [groupable]="true">
    <kendo-grid-column field="SupplierID"></kendo-grid-column>
</kendo-grid>

Further details on how the data-binding directive works under the hood are available in the data operations with the DataBinding directive article.

The following example demonstrates how to use the grouping functionality with the kendoGridBinding directive.

Example
View Source
Change Theme:

In this article

Not finding the help you need?