Angular Data Grid Group Templates
The Grid provides built-in group templates which help you to customize the content of the group header and footer cells.
The available group templates are:
Header Template
The GroupHeaderTemplateDirective is evaluated for the grouped column only. The header template helps you to customize the default group value of a certain field.
The following example demonstrates how to change the group header text to Discontinued/Not Discontinued.
Header Column Template
The GroupHeaderColumnTemplateDirective is rendered in the group header cell of the corresponding column. It is especially useful to show an aggregate value for given columns.
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 Price column.
Footer Template
The GroupFooterTemplateDirective is rendered in the group footer cell of the corresponding column. It is especially useful to show an aggregate value for specific columns.
Check the Aggregates section for further details on how to use average, min, max, and other aggregates in the Grid.
To use the footer template, you set the showFooter option of the GroupableSetings configuration object to true.
<kendo-grid [groupable]="{ showFooter: true }" ... >
...
</kendo-grid>The following example demonstrates the kendoGridGroupFooterTemplate applied to the Price column.