Kendo UI
jQuery + Kendo UI + MockJax
HTML
<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.blueopal.min.css">
<script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<div id="grid"></div>
JavaScript
$.mockjax({
url: "data.json",
responseTime: 0,
responseText: [
{"Department":"Manager","ID":"1","Name":"Alexandre Heuze","Position":"General Manager"},
{"Department":"Accouting","ID":"2","Name":"Pengli Liu","Position":"Accounting Manager"},
{"Department":"Human Resources","ID":"5","Name":"Jie Wu","Position":"HR Administrator"},
{"Department":"Sales and Purchasing","ID":"6","Name":"Fei He","Position":"Sales Manager"},
{"Department":"R and D Department","ID":"10","Name":"Jun Zuo","Position":"R and D Engineer"}
]
});
var wcfDS = new kendo.data.DataSource({
transport: {
read: {
url: "data.json",
dataType: "json"
}
}
});
$("#grid").kendoGrid({
dataSource: wcfDS
});