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

Kendo UI Grid not populating

8 Answers 712 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
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

Sort by
0
Stefan
Telerik team
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!
 
0
Mark
Top achievements
Rank 1
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.

0
Mark
Top achievements
Rank 1
answered on 21 Jun 2016, 03:06 PM

I have resolved the issue.

Mark

0
Mr. Rony
Top achievements
Rank 2
answered on 11 Jul 2018, 07:04 PM

How do you resolve this issue with the kendogrid i have the same problem..

 

 

than you 

0
Mr. Rony
Top achievements
Rank 2
answered on 11 Jul 2018, 07:05 PM
Please explain me how do you resolve the preoblem
0
Stefan
Telerik team
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.
0
Kojoe
Top achievements
Rank 1
answered on 24 Apr 2019, 03:40 PM
Do you mind sharing how you resolved it?
0
Preslav
Telerik team
answered on 26 Apr 2019, 08:59 AM
Hello Kojoe,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Mark
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Mark
Top achievements
Rank 1
Mr. Rony
Top achievements
Rank 2
Kojoe
Top achievements
Rank 1
Preslav
Telerik team
Share this question
or