New to Kendo UI for AngularStart 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:
    • groupChange event—Use this event when you enable only the grouping data operation.
    • dataStateChange event—Use this event when you enable more than one data operation, for example, grouping and filtering. For more details, check the section on how to handle multiple data operations.

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 and use the process() method. 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.

Change Theme
Theme
Loading ...

Grouping on the Server

Handle the groupChange or dataStateChange event to send a request containing information about the current Grid state to the server. See the section on handling multiple data operations using remote data for an example.