Kendo grid aggregate error (count is not defined) - kendo-ui

Question

I'm trying to use the aggregation feature on the kendo grid control.
But every time I got next error
Uncaught ReferenceError: count is not defined
error
Here is the demo demo

Answer 1

The answer is here: https://www.telerik.com/forums/declarative-creation-of-grid-with-data-attribues-(footertemplate)
Look for Daniel's responses
You have to change your footerTemplate to contain a conditional to avoid the error during initialization where your datasource hasn't yet been created due to the way things are initialized.
Change your footerTemplate to
footerTemplate: 'Total Count: #=data.UnitPrice ? data.UnitPrice.count : 0 #'
and it should work.
Demo: https://dojo.telerik.com/#Stephen/ADelIC

Answer 2

None of the solutions on the Internet for this issue helped me (including the accepted answer here).
I specified schema for the datasource, the aggregates field (as proposed by the Telerik documentation) and I was still getting the same error. Here is how I managed to solve this thing. First some background:
In order for the grid to perform aggregate functions, the data has to be in the grid's datasource upon creation of the grid
If your data is in the DOM (for example in a table element) and you create the grid on this table, the aggregate functions will not work (not only count, but max, min, etc.) and you will end up with this error. Note that the grid itself will work, because this is supported behaviour (I think it is called DOM binding)
You have to create kendo grid via source binding, i.e. specify in the datasource the data.
Telerik Documentation for source binding
Working example (with source binding):
HTML:
<div id="myGrid"></div>
JavaScript:
$("#myGrid").kendoGrid({
sortable: true,
dataSource: {
data: [{
Id: 1,
Url: "https://stackoverflow.com/",
Year: 2020,
Status: "Active"
}]
}
//Other configuration
});
Not working example (with DOM binding) -> ends up with
Uncaught ReferenceError: count is not defined error
HTML:
<table id="myGrid">
<tr>
<th>Id</th>
<th>Url</th>
<th>Year</th>
<th>Status</th>
</tr>
<tr>
<td>1</td>
<td>https://stackoverflow.com/</td>
<td>2020</td>
<td>Active</td>
</tr>
</table>
JavaScript:
$('#myGrid').kendoGrid({
sortable: true,
// Other configuration
});
If you do not want to change the DOM you can go with my approach:
Take the DOM elements using JQuery,
Loop them and create an array of JavaScript object
Pass the array to the grid as dataSource.data
Hide or remove from DOM the original table.
P.S.
I have not tried the grid behaviour when the datasource is with transport, i.e. using ajax with/without server paging, so there the behaviour could be different, because it makes no sense to show aggregated value only on a single page of the whole data, maybe then we have to return from the server this aggregated values (never tried that tbh).