This is qit easy. I dont post very lookrative. You can read step by step tutorial from here
How to Bind Kendu UI Grid with ASP.NET MVC Html5
Step 1:Inside Home Controller past this code to overriding About function.
publicActionResult About(){
BLC_DEVEntitiesob = newBLC_DEVEntities();
var result = ob.Sys_Grade.ToList();
returnJson(result);
}
publicActionResultKendoGrid()
{
return View();
}
This function return list of Json formatted ‘Grade’ Table data. Right click on KendoGrid() function and add click to add new View.
Step 2: In KendoGrid.cshtml page will created. Past bellow code in it.
<divid>
<divid>
<divid>
<script>
$(document).ready(function () {
varsourceGridDataSource = newkendo.data.DataSource({
schema: {
model: {
id: "GradeID",
fields: {
GradeID: { type: "int", editable: false, validation: { required: false, min: 1 } },
GradeName: { type: "string", editable: true, validation: { required: true, min: 1 } }
}
}
},
transport: {
read: {
url: "@Url.Action("About", "Home")",
dataType: "JSON",
method: "POST",
}
},
batch: true,
pageSize: 10
});
$("#grid").kendoGrid({
dataSource: sourceGridDataSource,
selectable: "row",
navigatable: true,
filterable: true,
height: 300,
toolbar: ["create"],
sortable: true,
resizable: true,
pageable: true,
columns: [
{ field: "GradeID", title: "ID", width: "120px", filterable: true, headerAttributes: { "class": "gridHeader", style: "font-weight: bold;font-size: 13px;" } },
{ field: "GradeName", title: "GradeName", width: "120px", filterable: false, headerAttributes: { "class": "gridHeader", style: "font-weight: bold;font-size: 13px;" } }
],
editable: "inline"
});
});
</script>
Step 3:
Now run this code and bingo.
Download Source Code: Bind Kendo Grid ASP.NET MVC
If you have any confusion or have any question feel free to write on comments section. I will try to answer it. Thanks