Click here to Skip to main content
15,849,615 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
How to bind grid by using kendo Ui,

and how to manipulate CRUD operations in mvc4 by using kendo UI
Posted
Comments
SwarupDChavan 20-May-14 9:24am    
hey have you checked with this site http://demos.telerik.com/kendo-ui/web/grid/index.html wherein they have provided everything needed to work with kendo grid

1 solution

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
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900