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:
- The Data-Binding Directive—Allows you to implement the grouping (or other data operations) with less code.
- Manual Grouping—Provides more control when implementing the grouping feature.
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:
-
Set the
groupable
property of the Grid. -
(Optional) Set the
group
property to aGroupDescriptor
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.