Introduction
Contribution
Knowledge Base
Grid

columns.footerAttributesObject

HTML attributes of the column footer. The footerAttributes option can be used to set the HTML attributes of that cell.

HTML attributes which are JavaScript keywords (e.g. class) must be quoted.

<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)}`,
          footerAttributes: {
              "class": "table-footer-cell k-text-right",
              style: "font-size: 14px"
          }
        }
      ],
      dataSource: {
        data: [
          { name: "Jane Doe", age: 30 },
          { name: "John Doe", age: 33 }
        ],
        aggregate: [
            { field: "age", aggregate: "min" },
            { field: "age", aggregate: "max" }
        ]
      }
    });
</script>

The table footer cell will look like this: <td class="table-footer-cell" style="text-align: right; font-size: 14px">Min: 30 Max: 33</td>.

In this article
columns.footerAttributes
Not finding the help you need?
Contact Support