public
Last active

KendoUI Grid With OData Service

  • Download Gist
JSONPpartial.cs
C#
1 2 3 4 5
[System.ServiceModel.ServiceBehavior(IncludeExceptionDetailInFaults = true)]
[JSONPSupportBehavior]
public partial class NorthwindService : OpenAccessDataService<KendoUIOAOData.EntitiesModel>
{
//Rest of code omitted
body.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
<!--Will be turned into a kendo-ized grid! -->
<div id="grid">
</div>
<!-- configure grid-->
<script>
var dateRegExp = /^\/Date\((.*?)\)\/$/;
 
function toDate(value) {
var date = dateRegExp.exec(value);
return new Date(parseInt(date[1]));
}
 
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "/NorthwindService.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
 
filterable: true,
sortable: true,
pageable: true,
 
columns: [{
field: "OrderID",
filterable: false
},
"Freight", {
field: "OrderDate",
template: '#= kendo.toString(toDate(OrderDate), "MM/dd/yyyy")#'
},
"ShipName",
"ShipCity"
]
});
});
</script>
completehtml.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/2011.3.1129/kendo.all.min.js"></script>
<link href="Content/common.css" rel="stylesheet"/>
<link href="Content/2011.3.1129/kendo.common.min.css" rel="stylesheet" />
<link href="Content/2011.3.1129/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
var dateRegExp = /^\/Date\((.*?)\)\/$/;
 
function toDate(value) {
var date = dateRegExp.exec(value);
return new Date(parseInt(date[1]));
}
 
$(document).ready(function () {
var crudServiceBaseUrl = "http://localhost:7312/NorthwindService.svc",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Orders",
dataType: "odata"
},
update: {
url: crudServiceBaseUrl + "/Orders/Update",
dataType: "odata"
},
destroy: {
url: crudServiceBaseUrl + "/Orders/Destroy",
dataType: "odata"
},
create: {
url: crudServiceBaseUrl + "/Orders/Create",
dataType: "odata"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 30,
schema: {
type: "odata",
model: {
id: "OrderID",
fields: {
OrderID: { editable: false, nullable: true },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
}
});
 
$("#grid").kendoGrid({
dataSource: dataSource,
navigatable: true,
pageable: true,
height: 400,
toolbar: ["create", "save", "cancel"],
columns: [{ field: "OrderID", filterable: false },
"Freight",
{field: "OrderDate", template: '#= kendo.toString(toDate(OrderDate), "MM/dd/yyyy")#'},
"ShipName",
"ShipCity",
{ command: "destroy", title: " ", width: "110px"}],
editable: true
});
});
</script>
</div>
</body>
</html>
headincludes.html
HTML
1 2 3 4 5
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/2011.3.1129/kendo.all.min.js"></script>
<link href="Content/common.css" rel="stylesheet"/>
<link href="Content/2011.3.1129/kendo.common.min.css" rel="stylesheet" />
<link href="Content/2011.3.1129/kendo.default.min.css" rel="stylesheet" />

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.