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

Angular Data Grid Manual Grouping

The manual grouping gives the developer full control over the grouping of the data. Compared to the grouping with the built-in directive, the manual approach provides greater transparency of the grouping process because it requires you to handle the Grid events manually. The manual grouping is especially useful when you require additional customization of the grouping logic.

To enable the grouping feature using the manual setup approach:

  1. Set the groupable property of the Grid.
  2. Bind the group option to a GroupDescriptor object.
  3. To group local data or send a remote service request, handle one of the following events:

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

Grouping Local Data

The Data Query package provides built-in methods that enable you to group local data. These methods apply the GroupDescriptor object to the Grid. Which method to use depends on the number of enabled data operations:

  • groupBy()Use this method when grouping is the only enabled data operation.
  • process()Use this method when more than one data operation is enabled, for example, grouping and filtering.

When you enable multiple data operations, handle the dataStateChange event instead of the groupChange event. For more details, check the section on how to handle multiple data operations.

The following example demonstrates how to group the data by using the groupChange event and the groupBy method.

View Source
Change Theme:

Grouping on the Server

To send a request containing information about the current Grid state to the server, handle the groupChange, or dataStateChange event. For more details, check the section on how to handle multiple data operations using remote data.