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