CODEWITHSUNDEEP
kendo-uikendo-gridkendo-mvvm
mola10
mola10

Reputation: 986

Kendo grid aggregate error (count is not defined)

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

Upvotes: 0

Views: 3630

Answers (2)

antanta
antanta

Reputation: 740

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:

  1. Take the DOM elements using JQuery,
  2. Loop them and create an array of JavaScript object
  3. Pass the array to the grid as dataSource.data
  4. 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).

Upvotes: 0

The Dread Pirate Stephen
The Dread Pirate Stephen

Reputation: 3169

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

Upvotes: 2

Related Questions