GroupHeaderTemplateDirective

The directive allows customizing the content of the group header cell in the Grid. Place an <ng-template> with the kendoGridGroupHeaderTemplate directive inside <kendo-grid-column> to set the group header template. (See example).

The template context uses the current data item and provides these fields:

• group—The current group item.
• field—The field name used for grouping.
• value—The current group value.
• aggregates—All aggregate values for the current group.
• index—The index of the current group.
• expanded—A boolean that shows if the group is expanded.

html

<kendo-grid [data]="gridData" [group]="groups">
   <kendo-grid-column field="ProductName">
      <ng-template kendoGridGroupHeaderTemplate let-group let-field="field" let-value="value">
         <strong>{{field}}</strong>: {{value}}
      </ng-template>
   </kendo-grid-column>
</kendo-grid>

Selector

[kendoGridGroupHeaderTemplate]