I'm not sure if I'm doing this right, as I'm new to whole these systems, but I want to manage my kendo grid data (pagination, filters, etc). I'm using this ODataController in ASP.NET Web API 2, driven from version 4 of OData package, which support parameters like: $top, $skip, $count,. etc...
due reading many incomplete hello world, samples, stack thread, testing many of them, i reach to this part(The Code in below here), which is support other non-exists parameters (like: take):
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<title>AngularJS</title>
<link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
<link href="../Content/telerik/content/web/kendo.common.min.css" rel="stylesheet">
<link href="../Content/telerik/content/web/kendo.rtl.min.css" rel="stylesheet">
<link href="../Content/telerik/content/web/kendo.default.min.css" rel="stylesheet">
<script src="../Content/telerik/scripts/jquery.min.js"></script>
<script src="../Content/telerik/scripts/angular.min.js"></script>
<script src="../Content/telerik/scripts/kendo.all.min.js"></script>
<script src="../content/shared/js/console.js"></script>
<script>
</script>
</head>
<body>
<a class="offline-button" href="../index.html">Back</a>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions"></kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ]);
function MyCtrl($scope) {
$scope.mainGridOptions = {
dataSource: {
type: "odata-v4",
transport: {
//read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
read: "/odata/people",
dataType: "json"
},
parameterMap: function (data, operations) {
var paramMap = kendo.data.transports.odata.parameterMap(data);
if (paramMap.$inlinecount) {
if (paramMap.$inlinecount == "allpages") {
paramMap.$count = true;
}
delete paramMap.$inlinecount;
}
if (paramMap.$take) {
paramMap.$top = paramMap.$take;
delete paramMap.$take;
}
if (paramMap.$filter) {
paramMap.$filter = paramMap.$filter.replace(/substringof\((.+),(.*?)\)/, "contains($2,$1)");
}
return paramMap;
},
schema: {
data: function (data) { return data.value; },
total: function (data) { return data['@odata.count']; },
model: {
id: "Email",
fields: {
Name: {type: "string"},
Email: {type: "string"},
}
}
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: true,
pageable: true,
//detailTemplate: kendo.template($("#template").html()),
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [
{
field: "Name",
title: "Name",
width: "200px"
},
{
field: "Email",
title: "E-Mail",
width: "200px"
},
]
};
}
</script>
</body>
</html>
The code use a injected anonymous function, which let it to define custom parameters and map them.
parameterMap: function (data, operations) {
var paramMap = kendo.data.transports.odata.parameterMap(data);
if (paramMap.$inlinecount) {
if (paramMap.$inlinecount == "allpages") {
paramMap.$count = true;
}
delete paramMap.$inlinecount;
}
if (paramMap.$take) {
paramMap.$top = paramMap.$take;
delete paramMap.$take;
}
if (paramMap.$filter) {
paramMap.$filter = paramMap.$filter.replace(/substringof\((.+),(.*?)\)/, "contains($2,$1)");
}
return paramMap;
},
schema: {
data: function (data) { return data.value; },
total: function (data) { return data['@odata.count']; },
model: {
id: "Email",
fields: {
Name: {type: "string"},
Email: {type: "string"},
}
}
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
I, after checking over things, and change a little here and there, like, setting schema, and add new conditions (as they were left blank on the sample code).
Now, what is issued me, is that after running my application, I noticed, not even it doesn't apply my snippet code...
if (paramMap.$take) {
paramMap.$top = paramMap.$take;
delete paramMap.$take;
}
but it even doesn't applied the other section, and also JavaScript debugger won't break inside the function... . so for example it won't add parameters like, count...
So, i come here to first, make sure i go the right way, and second that if it's right way, then how to fix it...
i also read something about change things to JSON, but i assume my data is JSON, as i don't define any inline string...
kendo does support oData v4 now, so just make sure you got the right version and it will handle the url automatically. then you may want to get rid of the 'parameterMap' part and change the 'read' to
read: {
url:'/odata/people',
dataType: 'json'
}