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

Grouping Basics

The Grid enables you to display grouped table data.

Getting Started

To enable grouping:

  1. Set the groupable and group options of the Grid.
  2. Handle the groupChange or the emitted dataStateChange event.
  3. Manually group the data. The Kendo UI Grid for Angular expects the grouped data to be a collection of GroupResults.

For more information, refer to the article on the process helpers for bulk data operations.

View Source
Edit In Stackblitz  
Change Theme:

Using with Built-In Data Operations

When you apply the built-in data binding directive, or the groupBy() or process() functions of the Data Query component, the order of the groups follows the default order of the data type of the field. As a result, the default sorting order for the respective value type will order the groups in an ascending or descending direction.

To control the sorting direction of the groups, use the GroupDescriptor option. However, the Grid does not provide an option for custom sorting of its data groups.

Known Limitations

If the Grid has its locked-columns feature enabled, the group header row will be truncated to the locked section.