How to bind Kendo grid in mvc4

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