Working with the Kendo UI Grid with ASP.NET MVC


Desktop-as-a-Service Designed for Any Cloud ? Nutanix Frame


To present tabular data in our Web applications, developers generally use HTML tables or other UI libraries. Kendo UI Grid is an easy, more maintainable, and powerful control for displaying data in a tabular format. Kendo provides many options, such as paging, sorting, filtering, grouping, and editing. These features determine the way data is presented and manipulated. Telerik Kendo UI® Core is the open source framework and version of Kendo UI. It's a comprehensive framework for building modern Web and mobile apps with HTML5 and JavaScript. In this article, I will demonstrate the basic usage of the Kendo UI Grid control, which is used to work with tabular data.

Sample ASP.NET MVC Application

Create a new empty ASP.NET MVC Application, as demonstrated in Figure 1.

To create a new application, Open Visual Studio ->File menu ->New project ->ASP.NET Web Application.

New ASP.NET MVC Application
Figure 1: New ASP.NET MVC Application

Select the MVC template and click 'OK'. Refer to Figure 2.

Select MVC Template
Figure 2: Select MVC Template

Next, download the Kendo UI for ASP.NET MVC version. Install the Telerik UI for ASP.NET MVC Setup 2016. After completing the installation, copy the CSS and JS files from the installed location and paste them into the project created in the previous step.

Now, open App_Start-> BundleConfig.cs to add the bundles for the Telerik UI for ASP.NET MVC.

bundles.Add(new ScriptBundle("~/Kendo").Include

Next, add a script bundle for the Telerik UI for ASP.NET MVC.

bundles.Add(new StyleBundle("~/Kendo/styles").Include

To allow minified files in Debug mode, add the following code.


The following code snippet demonstrates the bundle class.

using System.Web;
using System.Web.Optimization;

namespace PrjKendoSample
   public class BundleConfig
   // For more information on bundling, visit
   // http://go.microsoft.com/fwlink/?LinkId=301862
   public static void RegisterBundles(BundleCollection bundles)
      bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
         bundles.Add(new ScriptBundle("~/bundles/jqueryval")
         bundles.Add(new ScriptBundle("~/bundles/modernizr")
         bundles.Add(new ScriptBundle("~/bundles/bootstrap")
         bundles.Add(new StyleBundle("~/Content/css").Include(
            "~/Content/bootstrap.css", "~/Content/site.css"));
         bundles.Add(new ScriptBundle("~/Kendo")

         bundles.Add(new StyleBundle("~/Kendo/styles")



Next, open the layout Application. By default, it is Views/Shared/_Layout.cshtml, and add the following lines of code.


The following code snippet demonstrates the _Layout.cshtml file.

<!DOCTYPE html>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,
   <title>@ViewBag.Title - My ASP.NET Application</title>

   <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
            <div class="navbar-header">
               <button type="button" class="navbar-toggle"
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
               @Html.ActionLink("Application name", "Index",
                  "Home", new { area = "" },
                  new { @class = "navbar-brand" })
            <div class="navbar-collapse collapse">
               <ul class="nav navbar-nav">
                  <li>@Html.ActionLink("Home", "Index",
                  <li>@Html.ActionLink("About", "About",
                  <li>@Html.ActionLink("Contact", "Contact",
      <div class="container body-content">
         <hr />
            <p>&copy; @DateTime.Now.Year -
               My ASP.NET Application</p>

      @RenderSection("scripts", required: false)


Next, to add the kendo.Mvc.dll reference, right-click References in Solution Explorer. Click Add Reference by selecting the Browse tab of the Add Reference dialog. You have to navigate to the install location of the Telerik UI for ASP.NET MVC. Navigate to wrappers/aspnetmvc/Binaries/MVC5. This folder contains the ASP.NET MVC 5 version of the Telerik UI for ASP.NET MVC. Select Kendo.Mvc.dll. Click OK.

Next, open the web.config file and add the Kendo UI namespace. Refer to the following code snippet of the namespace section of the Web.config file.

      <add namespace="System.Web.Mvc" />
      <add namespace="System.Web.Mvc.Ajax" />
      <add namespace="System.Web.Mvc.Html" />
      <add namespace="System.Web.Optimization"/>
      <add namespace="System.Web.Routing" />
      <add namespace="PrjKendoSample" />
      <add namespace="Kendo.Mvc.UI" />

Next, I have created a new model class named Student.cs. Refer to the following code snippet of the Student class.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace PrjKendoSample.Models
   public class Student
      public Student(int StudentID, string StudentFirstName,
         string StudentLastName, string StudentClass,
         int RollNumber)
         this.StudentID = StudentID;
         this.StudentFirstName = StudentFirstName;
         this.StudentLastName = StudentLastName;
         this.StudentClass = StudentClass;
         this.RollNumber = RollNumber;


      public int StudentID { get; set; }
      public string StudentFirstName { get; set; }
      public string StudentLastName { get; set; }
      public string StudentClass { get; set; }
      public int RollNumber { get; set; }


I've added a Student controller and added the following Action Method in it.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace PrjKendoSample.Controllers
   public class StudentController : Controller

      public ActionResult Index()
         return View();

      public ActionResult StudentList([DataSourceRequest]
         DataSourceRequest request)
            List<Student> _stu = new List<Student>();
            _stu.Add(new Student(1, "Ram", "Kumar","Five", 1));
            _stu.Add(new Student(2, "Sham", "Kumar", "Five", 2));
            _stu.Add(new Student(3, "Jadu", "Kumar", "Five", 3));
            DataSourceResult result =
            return Json(result, JsonRequestBehavior.AllowGet);
         catch (Exception ex)
            return Json(ex.Message, JsonRequestBehavior.AllowGet);

Finally, I have created a New empty index view with the default layout under the student folder and added the following code in it.

<div class="container">
   <div class="row">
   .DataSource(dataSource => dataSource
      .Read(read => read.Action("StudentList",

Now, browse the Application to see the grid with data.


That was all about Kendo with ASP.NET MVC application. I hope this article was helpful!! That's all for today; happy reading!

This article was originally published on March 26th, 2019

About the Author

Tapas Pal

I am working in Microsoft Technology for last 15 years and presently working with Cognizant Technology Solutions, India as Senior Architect. I have completed TOGAF 9.1,Microsoft Certification on .NET 1.1 , .NET 2.0, SQL Server 2005 and Sharepoint. Please visit my Blog - http://tapas-pal.blogspot.com/

Related Articles

Most Popular Programming Stories

More for Developers

RSS Feeds

Thanks for your registration, follow us on our social networks to keep up-to-date