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.
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:
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>
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