Introduction
Contribution
Knowledge Base
Grid

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

<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>
<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>
<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>
In this article
columns.footerTemplate
Not finding the help you need?
Contact Support