columns.footerAttributes Object

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.

Example - set the column footer HTML attributes

<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