Kendo footertemplate - kendo-ui

Question

I have a kendo grid and I want to add a footerTemplate, but the value for the footerTemplate will be dynamic (other computations will be involved.) My question now, how to use the computed value to the footherTemplate?
Below is my sample code.
var computedValue= compute();
$("#grid").kendoGrid({
dataSource: {
data: setData(),
pageSize: 10
},
sortable: true,
scrollable: false,
pageable: true,
columns: [
{ field: "UnitPrice", title: "Unit Price",
footerTemplate: "Price : #=computedValue#"
},
{ field: "UnitsOnOrder", title: "Units On Order"},
{ field: "UnitsInStock", title: "Units In Stock"}
]
});
as you can see, the value for the footerTemplate is from a "var computedValue", now when I do that nothing happens. What is the correct way in order to show the value?
Thanks

Answer 1

Simply use a function for the footer template. Then, your function will be called each time the grid updates its contents.
footerTemplate: function(data) {
return "Price: " + compute();
}

Answer 2

You can use your function like this.
Kendo grid
$("#grid").kendoGrid({
dataSource: window.ds,
scrollable: false,
pageable: true,
editable: true,
columns: [
{ field: "Name", title: "Name" },
{ field: "Value", title: "Value",
footerTemplate: "Total:<span id='myId'> #=window.calc()#</span>" }
]
});
Javasript Function
<script>
function calc() {
// assume this to be dynamically determined
var field = "Value";
// assume this to be dynamically determined
var dataSource = window.ds;
// some custom calc logic
var newValue = 0;
$.each(dataSource.data(), function(index, model) {
newValue += model.get(field);
});
return newValue;
}
</script>
Refrence Link