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
groupable
property of the Grid. - Bind the
group
option to aGroupDescriptor
object. - 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 thegroupChange
event and use theprocess()
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.
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.