Providing Interactive Grid handling in ASP.Net MVC Application using Kendo UI

Nowadays, in every application, grid plays an important role in providing rich and easy interface for data management. In my last project I used Telerik Kendo UI Grid control for ASP.Net which I found quite easy and robust to use with ASP.NET MVC applications. Developers only need to provide some configuration and the rest of features like paging, sorting, filtering editing, updating, etc. runs accordingly. Moreover, there are lot of different skins available which you can apply depending on your UI design.

Following are the steps shows the usage of Telerik Kendo UI Grid control in ASP .NET MVC applications with a minimal amount of code.

  1. Create a new ASP.Net MVC Web Application in Visual Studio
  2. Make sure you have installed the Telerik ASP.NET MVC Controls suite from telerik website.
  3. In your MVC project add a reference to Kendo.MVC.dll from C:\Program Files (x86)\Telerik\UI for ASP.NET MVC Q1 2014\wrappers\aspnetmvc\Binaries\Mvc5
  4. Under the Scripts folder add kendo.all.min.js and kendo.aspnetmvc.min.js files from C:\Program Files (x86)\Telerik\UI for ASP.NET MVC Q1 2014\JS
  5. Then, create another folder Styles under root MVC project and add three files and a Default folder containing images for telerik controls.

    – kendo.common.min.css

    – kendo.dataviz.min.css

    – kendo.default.min.css

  6. Open BundleConfig.cs file and add entries to newly added Kendo CSS files and Javascript files.










7. Now open the _Layout.cshtml as this is the default master page in ASP.Net MVC application and add the newly configure kendo bundle in the head section as below


8. Now let’s create a new controller named “DemoController”


9.  Create a sample model class that contains few properties


Int32 Id { set; get; }

String Name { set; get; }

String Company { set; get; }

String Designation { set; get; }

String EmailAddress { set; get; }

10. Then in the newly added DemoController add a GetPersons method that returns the list of persons to display in a view.

DemoController : Controller


// GET: Demo

ActionResult GetPersons([DataSourceRequest] DataSourceRequest request)


List<Person> personLst = new

Person { Id = 1, Name = “Ovais Mehboob”, Company = “USTS”, Designation = “Technical Architect”, EmailAddress = “” });

Person { Id = 1, Name = “Khusro Habib”, Company = “EO”, Designation = “SAP Lead”, EmailAddress = “n/a” });

Person { Id = 1, Name = “David”, Company = “USTS”, Designation = “Network Administrator”, EmailAddress = “n/a” });

return Json(personLst);



11. Create a Index method that returns ActionResult. As per the default routing engine this will be invoked whenever the controller will be called without action name

12. Add a new empty view by right clicking the Index method

13. Add the html.kendo grid code as shown below in the Index.cshtml page

@using System.Collections;

@using Kendo.Mvc.UI;




.Columns(columns =>


columns.Bound(p => p.Name).Width(200).Title(“Name”);

columns.Bound(p => p.Company).Width(300).Title(“Company”);

columns.Bound(p => p.Designation).Width(200).Title(“Designation”);

columns.Bound(p => p.EmailAddress).Width(200).Title(“Email Address”);


.HtmlAttributes(new { style = “height: 500px” })

.Editable(editable => editable.Mode(GridEditMode.InCell))







.Resizable(resizable => resizable.Columns(true))

.DataSource(dataSource => dataSource





.Model(model =>


model.Id(p => p.Id);



.Read(action => action.Action(“GetPersons”, “Demo”))

.Update(“SavePerson”, “Demo”)



14. If you see the above code the .Read is the method where you can specify the action name followed with a Controller name

15. Likewise read, you can add update and delete methods as well

16. There are many attributes provided which you can configure on the fly like Pageable() for paging, Filterable() for filtering. For detailed documentation for each method please visit

17. Once you build and run the project you will see something like below

Hope this helps!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s