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:
- The Data-Binding Directive—Allows you to easily implement the grouping (or other data operations) with less code.
- Manual Grouping—Provides more control when implementing the grouping feature.
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:
groupableproperty of the Grid.
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
Further details on how the data binding directive works under the hood are available in the data operations with the DataBinding directive article.