Please see code below:
========================================
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/kendo.web.min.js" type="text/javascript"></script>
<script src="js/kendo.all.min.js" type="text/javascript"></script>
<script src="js/kendo.all.min.js"></script>
<script src="js/kendo.grid.min.js"></script>
<script src="js/jquery-ui-1.7.3.custom.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
type: "jsonp",
transport: {
read: "http://localhost:3481/api/employees"
},
schema: {
model: {
fields: {
Code: { type: "String" },
Name: { type: "String" },
ContactName: { type: "string" },
}
}
},
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 250,
sortable: true,
pageable: true,
columns: [
{
field: "Code",
title: "ID",
width: 100,
}, {
field: "Name",
title: "Name",
width: 200
}, {
field: "ContactName",
title: "Contact Name"
}
]
});
});
</script>
</div>
</body>
</html>