GroupHeaderTemplateDirective

Represents the group-header cell template of the Grid which helps to customize the content of the group header item. To define the group header template, nest an <ng-template> tag with the kendoGridGroupHeaderTemplate directive inside <kendo-grid-column>. (See example).

The template context is set to the current data item and the following additional fields are passed:

• group—The current group item.
• field—The name of the field by which data is grouped.
• value—The current group value.
• aggregates—All aggregate values for the current group.
• index—The index of the current group.
• expanded—A boolean value indicating if the group is currently 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]