Adding Multiple Footers to Kendo UI Grid Without Grouping
Environment
Product | Kendo UI for jQuery Grid |
---|---|
Version | 2024.1.319 |
Description
I want to add multiple footer rows to the Kendo UI Grid without using grouping. How can I achieve multiple footers in the Grid to display custom calculations or summaries for columns?
This KB article also answers the following questions:
- How to customize the footer in Kendo UI Grid?
- Can the Kendo UI Grid have multiple footer rows without grouping?
Solution
To add multiple footer rows to a Kendo UI Grid without employing grouping, utilize the footer template to divide the content into separate div
elements. By doing so, you can simulate multiple footers. Here is a step-by-step guide:
-
Define the Grid Column with Custom Footer Template: In the Grid column definition, use the
footerTemplate
to introduce multiplediv
elements for displaying various calculations or summaries.{ field: "age", footerTemplate: function({age}) { return '<div class="custom">Min: ' + age.min + '</div>' + '<div class="custom">Max: ' + age.max + '</div>' + '<div class="custom">Custom Calculation: ' + customCalculation(age) + '</div>'; }, }
-
Add Custom CSS for Styling: Apply custom CSS to style the
div
elements similar to Grid cells. This enhances the visual coherence of the footer rows with the rest of the Grid.<style> .custom{ border: 1px solid gray; border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08)); } .k-footer-template .k-table-td{ padding: 0px; } </style>
Below you will find a runnable example:
<style>
.custom{
border: 1px solid gray;
border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
}
.k-footer-template .k-table-td{
padding: 0px
}
</style>
<div id="grid"></div>
<script>
let additional = 'Some custom calculation'
function customCalculation(dataItem){
return dataItem.min * 5
}
$("#grid").kendoGrid({
columns: [
{ field: "name",
footerTemplate: function({age}) {
return '<div class="custom">Min: </div><div class="custom"> Max: </div><div class="custom"> ' + ' Custom: ' + '</div>'
},
},
{ field: "age",
footerTemplate: function({age}) {
return '<div class="custom">' + age.min + '</div><div class="custom">' + age.max + '</div><div class="custom"> ' + additional + ' : ' + customCalculation(age) + '</div>'
},
}
],
dataSource: {
data: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 },
{ name: "Alex", age: 20 },
{ name: "Peter", age: 43 },
{ name: "Robert", age: 18 },
{ name: "Alice", age: 28 }
],
aggregate: [
{ field: "age", aggregate: "min" },
{ field: "age", aggregate: "max" }
]
}
});
</script>