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 group the data by а single or multiple fields when the component is initialized or dynamically by user interactions.

To group the data, drag a column header to the group panel. The Grid will create groups in the data rows based on the available values for that field.

You can enable the grouping feature in two ways using:

Using the Data-Binding Directive

You can perform an automatic grouping of the Grid data, by using the built-in DataBindingDirective. 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>

The following example demonstrates the grouping functionality using the kendoGridBinding directive.

Example
View Source
Change Theme:

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

In this article

Not finding the help you need?