Grid Grouping Display Modes
The Grid supports four display modes for grouped data: Default, Compact, Single Column, and Multiple Columns.
Set the displayMode option of the GroupableSettings object to configure the grouping display mode.
Each mode changes how grouped rows and group columns are generated. Choose the mode that matches the number of group levels, available horizontal space, and data presentation.
The following table summarizes the recommended use cases for each display mode.
| Display Mode | Recommended for | Description |
|---|---|---|
default | Traditional hierarchical lists (1–2 group levels) | Adds an indent column for each group level. |
compact | Mobile web apps & constrained viewport layouts | Removes indent columns and uses full-width group header rows. |
singleColumn | High-density dashboards & deep nesting (3+ levels) | Displays all group levels in a single grouping column. |
multipleColumns | Multi-variable analytics & side-by-side comparison | Displays one grouping column for each active group level. |
Default Mode
The default mode adds an indent column for each nested group level before the data columns. As groups become deeper, data rows receive progressively more indentation. This mode is active when displayMode is not specified.
Best for
- Traditional hierarchical lists with 1–2 group levels
- Classic tree-style data structures
- Scenarios where indent-based nesting is visually clear
The following demo shows the Grid with the default display mode applied.
Compact Mode
The compact mode removes indent columns and renders group header rows across the Grid width. Group header content identifies the hierarchy without reducing the width available to data columns. This mode is active when displayMode is set to 'compact'.
Best for
- Mobile web apps
- Constrained viewport layouts
- Maximizing the available space for data columns
The following demo shows the Grid with the compact display mode applied.
Single Column Mode
The single column mode displays all group levels in one grouping column before the data columns. The Grid indicates nesting depth with increasing left padding. Long group titles are truncated with an ellipsis when necessary. This mode is active when displayMode is set to 'singleColumn'.
To configure the width, title or other settings of the generated group column, refer to the Configuring Group Columns section.
Best for
- High-density dashboards
- Deep nesting with 3+ group levels
- Reducing the number of grouping columns
The following demo shows the Grid with the single column display mode applied.
Multiple Columns Mode
The multiple columns mode displays one grouping column for each active group level. Each column represents one level in the hierarchy, which makes grouped values easier to compare. Long group titles are truncated with an ellipsis when necessary. This mode is active when displayMode is set to 'multipleColumns'.
To configure the width, title or other settings of the generated group columns, refer to the Configuring Group Columns section.
Best for
- Multi-variable analytics
- Side-by-side comparison of grouped values
- Wide layouts with sufficient horizontal space
The following demo shows the Grid with the multiple columns display mode applied.
Hiding Grouped Columns
By default, the Grid displays grouped values in both the generated group columns and the original data columns. If you don't want this duplicated information, set the hideGroupedColumns option of the GroupableSettings object to true.
<kendo-grid
[data]="data"
[group]="groups"
[groupable]="{ displayMode: 'multipleColumns', hideGroupedColumns: true }">
</kendo-grid>Configuring Group Columns
When the Grid uses the singleColumn or multipleColumns display modes, it generates one or more group columns that display the grouped values. You can customize these generated columns through the groupColumn option of the GroupableSettings object.
The groupColumn option supports two configuration approaches. You can either apply the same settings to all generated group columns or configure each one individually.
Apply Settings to All Group Columns
To apply the same settings to all generated group columns, assign a GroupColumnSettings object to the groupColumn option.
<kendo-grid
[data]="data"
[group]="groups"
[groupable]="{ displayMode: 'multipleColumns', groupColumn: { width: 200, title: 'Group', reorderable: false } }">
</kendo-grid>Configure Each Group Column Individually
To configure each generated group column individually, assign a GroupColumnFn callback to the groupColumn option. The callback receives the GroupDescriptor for the generated group column and returns a GroupColumnSettings object.
public groupColumnCb: GroupColumnFn = (group: GroupDescriptor) => ({
width: group.field === 'Category.CategoryName' ? 260 : 160,
title: group.field === 'Category.CategoryName'
? 'Category'
: group.field,
reorderable: false
});