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


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

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.

(see example).

import { process } from '@progress/kendo-data-query';

    selector: 'my-app',
    template: `
        <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}}

class AppComponent {
    public groups = [{ field: "ProductName" }];

    public gridData = process([{
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": false
      }, {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000,
        "Discontinued": true
    ], {
     group: this.groups



In this article

Not finding the help you need?