Angular Data Grid Group Templates
The Angular Grid provides built-in group templates that let you customize the content of generated group headers and footers. Depending on the template, you can customize the group label, display aggregate values, or render custom footer content.
The available group templates are:
- Customizing the group label
- Adding aggregates to group header cells
- Customizing generated group columns
- Adding aggregates to group footer cells
Customizing the Group Label
The GroupHeaderTemplateDirective customizes the grouped value displayed in the group header for the grouped column. Use this template to customize how the grouped value is rendered.
The following example demonstrates how to change the group header text.
Adding Aggregates to Group Header Cells
The GroupHeaderColumnTemplateDirective renders content in the group header cell of a specific data column. This template is commonly used to display aggregate values, such as averages, sums, or maximum values, within group headers.
Check the Aggregates section for further details on how to use average, min, max, and other aggregates in the Grid.
The following example demonstrates the kendoGridGroupHeaderColumnTemplate used in the Amount column.
Customizing Generated Group Columns
When the Grid uses the singleColumn or multipleColumns grouping display modes, use the GroupColumnGroupHeaderTemplateDirective to customize the generated group column.
The template replaces only the group column text while preserving the built-in expand and collapse icons.
The following example demonstrates a sales order grid grouped by region and category. The kendoGridGroupColumnGroupHeaderTemplate renders a contextual icon alongside each group value — a globe icon for region and a folder icon for category.
Adding Aggregates to Group Footer Cells
The GroupFooterTemplateDirective renders content in the group footer cell of the corresponding data column. This template displays aggregate values at the bottom of each group.
Check the Aggregates section for further details on how to use average, min, max, and other aggregates in the Grid.
To render group footers, enable the showFooter option of the GroupableSettings configuration object.
<kendo-grid [groupable]="{ showFooter: true }" ... >
...
</kendo-grid>The following example demonstrates the kendoGridGroupFooterTemplate in action.