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 aGroupDescriptorobject. - To group local data or send a remote service request, handle one of the following events:
groupChangeevent—Use this event when you enable only the grouping data operation.dataStateChangeevent—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
dataStateChangeevent instead of thegroupChangeevent. 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.
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.
