New to Kendo UI for Angular? Start a free 30-day trial

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.
<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]

In this article

Not finding the help you need?