columns.groupFooterTemplate String|Function

The template which renders the group footer for the corresponding column. By default the group footer is not displayed. The group footer will always appear as long as at least one column has a defined groupFooterTemplate.

The fields which can be used in the template are:

  • 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)
  • data - provides access to all available aggregates, e.g. data.fieldName1.sum or data.fieldName2.average
  • group - provides information for the current group. An object with three fields - field, value and items. items field contains the data items for current group. Returns groups if the data items are grouped (in case there are child groups)

Important If the template is declared as a function the group field is accessible only through the data field, e.g. data.fieldName1.group.value.

Example - set the group footer template

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age",
      groupFooterTemplate: ({ age }) => `Total: ${age.count}`
    }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 30 }
    ],
    group: { field: "age", aggregates: [ { field: "age", aggregate: "count" }] }
  }
});
</script>

Example - set the group footer template as function

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age",
      groupFooterTemplate: function(e) {
          return "Total: " + e.age.count;
      }
    }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 30 }
    ],
    group: { field: "age", aggregates: [ { field: "age", aggregate: "count" }] }
  }
});
</script>
In this article