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
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
Rank 1
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.
Rank 1
I have resolved the issue.
Mark
Rank 2
How do you resolve this issue with the kendogrid i have the same problem..
than you
Rank 2
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
Rank 1
I assume that Mark might not be monitoring this forum.
Having said that, could you please elaborate on the issue that you are experiencing? This will allow us to investigate it, and provide assistance to the best of our knowledge.
Regards,
Preslav
Progress Telerik