When trying to connect a Kendo UI Grid to an MVC Web API datasource I was getting the following error: Cannot read property ‘__count’ of undefined
The problem is the format of the json being returned contains a value with the total number of records that can be used for paging.
Solution is to add the following lines to your schema for the data source:
data: function (data) {
return data;
},
total: function (data) {
return data['odata.count'];
},
Here is my compete code:
$(".tripSnapshotGrid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: {
url: toll.settings.app_url + "api/TripSnapshots/Get",
dataType: "json"
}
},
schema: {
data: function (data) {
return data;
},
total: function (data) {
return data['odata.count'];
},
model: {
fields: {
ID: { type: "number" },
TripName: { type: "string" },
TripState: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
filterable: true,
sortable: true,
pageable: true,
columns: [{
field: "TripState",
filterable: false,
width: 90
}, {
field: "TripName",
filterable: false
}
]
});
});
Thank your for your help. You save my whole day. and to added the when I use the web api odata, we still need to modify the data function
from
schema: {
data: function (data) {
return data;
},….} to
schema: {
data: function (data) {
return data[“value”];
},….}
Otherwise the kendo UI grid will report slice not a function error
You’re welcome eric. That is the reason i do it