columns.footerTemplate String|Function

The template which renders the footer table cell for the column.

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

If the grid is bound using source binding, it will initially be assigned with an empty dataSource without any aggregates. In order to avoid a JavaScript error for an undefined aggregate when the footer is rendered with the empty dataSource, you should check if the field is defined in the template data before accessing the value. If no groups are specified for the actual dataSource, then you will also need to use the field name to access the aggregate value.

Example - specify column footer template

<div id="grid"></div>
<script>
let encode = kendo.htmlEncode;
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age",
      footerTemplate: ({ age }) => `Min: ${encode(age.min)} Max: ${encode(age.max)}`,
    }
  ],
  dataSource: {
    data: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
    ],
    aggregate: [
        { field: "age", aggregate: "min" },
        { field: "age", aggregate: "max" }
    ]
  }
});
</script>

Example - specify footer template when using source binding

<div data-role="grid" data-bind="source:dataSource"
     data-columns='["category", "name", {"field": "price", "footerTemplate": ({price}) => `Total: ${kendo.htmlEncode(price ? price.sum : 0)}`}]'></div>
<script>
  $(function() {
    var viewModel = kendo.observable({
      dataSource: new kendo.data.DataSource({
        data: [
          { category: "Beverages", name: "Chai", price: 18 },
          { category: "Beverages", name: "Chang", price: 19 },
          { category: "Seafood", name: "Konbu", price: 6 }
        ],
        group: [{field: "category"}],
        aggregate: [
          { field: "price", aggregate: "sum" }
        ]
      })
    });
    kendo.bind($("body"), viewModel);
  });
</script>

Example - specify footer template when using source binding and there are no groups

<div data-role="grid" data-bind="source:dataSource"
     data-columns='["category", "name", {"field": "price", "footerTemplate": ({price}) => `Total: ${kendo.htmlEncode(price ? price.sum : 0)}`}]'></div>
<script>
  $(function() {
    var viewModel = kendo.observable({
      dataSource: new kendo.data.DataSource({
        data: [
          { category: "Beverages", name: "Chai", price: 18 },
          { category: "Beverages", name: "Chang", price: 19 },
          { category: "Seafood", name: "Konbu", price: 6 }
        ],
        aggregate: [
          { field: "price", aggregate: "sum" }
        ]
      })
    });
    kendo.bind($("body"), viewModel);
  });
</script>