Skip to content

Instantly share code, notes, and snippets.

@jholt456

jholt456/JSONPpartial.cs

Created February 6, 2012 23:12
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jholt456/1755775 to your computer and use it in GitHub Desktop.
Save jholt456/1755775 to your computer and use it in GitHub Desktop.
Download ZIP
KendoUI Grid With OData Service
Raw
body.html
<!--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>
Raw
completehtml.html
<!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>
Raw
headincludes.html
<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" />
Raw
JSONPpartial.cs
[System.ServiceModel.ServiceBehavior(IncludeExceptionDetailInFaults = true)]
[JSONPSupportBehavior]
public partial class NorthwindService : OpenAccessDataService<KendoUIOAOData.EntitiesModel>
{
//Rest of code omitted
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment