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:
- Set the
groupableproperty of the Grid.
- Bind the
groupoption to a
- 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.
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
dataStateChangeevent instead of the
groupChangeevent. 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
To send a request containing information about the current Grid state to the server, handle the
dataStateChange event. For more details, check the section on how to handle multiple data operations using remote data.