Click here to Skip to main content
14,668,708 members
Rate this:
Please Sign up or sign in to vote.
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

Rate this:
Please Sign up or sign in to vote.

Solution 1

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
   
v2

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




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100