This is a migrated thread and some comments may be shown as answers.

Kendo UI Grid not populating

8 Answers 1557 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Mark asked on 02 Jun 2016, 03:07 PM

I've created a simple Odata service that reads the contents of a single local SQL table. My service works correctly, I've checked in Postman, but the Kendo UI grid throws the following error:

Uncaught TypeError: Cannot read property '__count' of undefined

I checked entries on the board, and I've seen several that refer to the version of Odata. They imply that you need to use an older version of OData to work with the grid. The version I'm using is v4.0.30319. Will this version work with Kendo UI grid? Or does the error point to something else?

here's my html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//localhost:49666/CustomerComplaintDataService.svc/Complaints"
},
schema: {
model: {
fields: {
RecordNumber: { type: "number" },
Date: { type: "date" },
Brand: { type: "string" },
Filter_part_number: { type: "string" },
PlantMfrgLoc: { type: "string" },
Date_code: { type: "string" },
Person_talked_to: { type: "string" },
Phone_number: { type: "string" },
Company_Name: { type: "string" },
Product_Complaint: { type: "string" },
Action_taken: { type: "string" },
Results: { type: "string" },
Call_taken_by: { type: "string" },
Customer_Required_Response: { type: "string" },
Risk_Level: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "RecordNumber",
filterable: false
},
"Brand",
{
field: "Date",
title: "Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "Product_Complaint",
title: "Product Complaint"
}, {
field: "Action_taken",
title: "Action Taken"
}
]
});
});
</script>
</div>
</body>
</html>

Thanks in advance,

Mark

8 Answers, 1 is accepted

answered on 03 Jun 2016, 03:02 PM

Hello Mark,

I can assume, that the JSON being returned, contains a value with the total number of records, that can be used for paging.

If that is the case, check the following information on how to fix the JavaScript Error:

https://gerardbeckerleg.wordpress.com/2013/07/05/cannot-read-property-__count-of-undefined-kendo-ui-grid-mvc-web-api-odata/

I suppose that the DataSource type is set to "odata-v4":
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-type

Here is another useful article regarding Odata v4 usage:

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/how-to/oData-v4-web-api-controller

Let me know if you need additional information.

Regards,
Stefan
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 20 Jun 2016, 08:53 PM

I rewrote my web service as odata version 4. I have checked fiddle, and my get request is returning a 200 code, with json being correctly returned. However, the grid remains blank. I have paging and the total number of records is being displayed correctly by the grid. Unfortunately, no records are displayed.

Here's my html:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8" />
<script src="Scripts/jquery.min.js"></script>
<script src="Scripts/kendo.all.min.js"></script>
<link href="Styles/kendo.common.min.css" rel="stylesheet" />
<link href="Styles/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var dataSource = new kendo.data.DataSource({
type: 'odata-v4', // <-- Include OData style params on query string.
transport: {
read: {
url: "http://localhost:51394/odata/Complaint",
dataType: "json",
//parameterMap: function(data) {
// return kendo.data.transports.odata.parameterMap(data).replace("$inlinecount=allpages","$inlinecount=none");
//}
// dataType: "json" // <-- The default was "jsonp".
},
},
schema: {
model: {
id: "RecordNumber",
fields: {
RecordNumber: { type: "number" },
Filter_part_number: { type: "string" },
PlantMfrgLoc: { type: "string" },
Person_talked_to: { type: "string" }
}
},
data: function (data) {
return data.d;
},
total: function (data) {
return 830;
}
},
pageSize: 10,
serverPaging: false,
serverFiltering: true,
});

$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
selectable: true,
editable: true,
columns: ["RecordNumber", "Filter_part_number", "PlantMfrgLoc", "Person_talked_to"]
});

});
</script>
</div>

</body>
</html>

Any ideas what I'm doing wrong?

Thanks.

answered on 12 Jul 2018, 07:46 AM

Hello, Rony,

As Mark may not see this post, we will be happy to assist as well.

Please check if the following approaches are resolving the error:

https://stackoverflow.com/questions/40279221/error-uncaught-typeerror-cannot-read-property-count-of-undefined-in-grid

Also, ensure that the "o-data4" type is set to the Grid:

https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/type#type

If this does not help resolve the issue, please provide an example reproducing it, more details and I will gladly investigate further.

Regards,
Stefan
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.