columns.groupHeaderTemplate String|Function

The template which renders the group header when the grid is grouped by the column field. By default the name of the field and the current group value is displayed.

The fields which can be used in the template are:

• value - the current group value
• field - the current group field
• average - the value of the "average" aggregate (if specified)
• count - the value of the "count" aggregate (if specified)
• max - the value of the "max" aggregate (if specified)
• min - the value of the "min" aggregate (if specified)
• sum - the value of the "sum" aggregate (if specified)
• aggregates - provides access to all available aggregates, e.g. aggregates.fieldName1.sum or aggregates.fieldName2.average
• items - the data items for current group. Returns groups if the data items are grouped (in case there are child groups)

Important To use aggregates from other fields in the column.groupHeaderTemplate add them to the other columns.aggregates.

Example - set the group header template

<div id="grid"></div>
<script>
 var grid = $("#grid").kendoGrid({
    groupable: true,
    columns: [
        { field: "name" },
        {
            field: "age",
            groupHeaderTemplate: ({ age, aggregates }) => `Age:${age.group.value} total: ${age.count} Max Year: ${aggregates.year.max}`,
            aggregates: ["count"]
        },
        { field: "year", aggregates: ["max"] }
    ],
    dataSource: {
        data: [
            { name: "Jane Doe", age: 30, year: 1978 },
            { name: "John Doe", age: 30, year: 1980 }
        ],
        group: {
            field: "age", aggregates: [{ field: "age", aggregate: "count" },
            { field: "age", aggregate: "max" }, { field: "year", aggregate: "max" }]
        }
    }
}).data("kendoGrid");
</script>

Example - use items field inside the group header template

<div id="grid"></div>
<script>
var filterAdmins = function(item) {
  return item.role === "admin";
};
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age",
      groupHeaderTemplate: ({ items }) => `Admin count: ${items.filter(filterAdmins).length}`
    },
    {field: "role" }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30, role: "admin" },
      { name: "John Doe", age: 30, role: "guest" },
      { name: "Peter", age: 30, role: "admin" }
    ],
    group: { field: "age", aggregates: [ { field: "age", aggregate: "count" }] }
  }
});
</script>

Example - set the group header template as a function

<div id="grid"></div>
<script>
  var grid = $("#grid").kendoGrid({
    groupable: true,
    columns: [
      { field: "name" },
      {
        field: "age",
        groupHeaderTemplate: groupHeaderTemp,
        aggregates: ["count"]
      },
      { field: "year", aggregates: ["max"] }
    ],
    dataSource: {
      data: [
        { name: "Jane Doe", age: 30, year: 1978 },
        { name: "John Doe", age: 30, year: 1980 }
      ],
      group: {
        field: "age", aggregates: [
          { field: "age", aggregate: "count" },
          { field: "age", aggregate: "max" },
          { field: "year", aggregate: "max" }
        ]
      }
    }
  }).data("kendoGrid");

  function groupHeaderTemp(data) {
    return `Age: ${data.value} total: ${data.count} Max Year: ${data.aggregates.year.max}`;
  }
</script>