Kendo UI Grid With ASP.NET MVC

This article will show, how to work on Kendo UI Grid with ASP.NET MVC.

Create a new ASP.NET MVC project .

Configuring the Kendo UI in our application

Download Kendo UI for ASP.NET MVC here.

Install the TelerikUI for ASP.NET MVC Setup 2016, as shown in the figures, given below:

 

The installation is straight forward. Just choose the required products. In my case, I have selected UI for ASP.NET MVC and click next.  

After completing the installation, copy the CSS and JS file from the installed location and paste it in your project. In my case, I have created the separate folder called Kendo in the Application and pasted the copied Kendo CSS and JS file inside the folder.

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

Add a script bundle for Telerik UI for ASP.NET MVC. 

bundles.Add(new ScriptBundle("~/Kendo").Include("~/Kendo/js/kendo.all.min.js",
               "~/Kendo/js/kendo.aspnetmvc.min.js"));

Adding style bundle is given below:

bundles.Add(new StyleBundle("~/Kendo/styles").Include("~/Kendo/styles/kendo.common.min.css",
                "~/Kendo/styles/kendo.default.min.css"));

To allow the minified files in the debug mode, one can use:

bundles.IgnoreList.Clear();

Open the layout Application, by default, it is Views/Shared/_Layout.cshtml.

@Scripts.Render("~/Kendo")

Add the style bundle.

@Styles.Render("~/Kendo/styles")

Make sure that Jquery and the Kendo script bundle is moved to the head tag.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/Kendo")

Add the kendo.Mvc.dll reference

1. Right-click the References  in Solution Explorer. Click Add Reference.
2. Select the Browse tab of the Add Reference dialog. Navigate to the install location of Telerik UI for ASP.NET MVC.
3. Navigate to wrappers/aspnetmvc/Binaries/MVC5. This directory contains ASP.NET MVC 5 version of Telerik UI for ASP.NET MVC.
4. Select Kendo.Mvc.dll. Click OK.
   
   

Open the web.config file and add the Kendo UI namespace. 

<add namespace="Kendo.Mvc.UI" />

The setup is over. Now, let us see how to use Kendo Grid with HTML helpers. 

Create a new model class. In my case, I named it as Employee.cs.

public class Employee
{

    public Employee(int EmployeeID, string FirstName, string LastName)
    {
        this.EmployeeID = EmployeeID;
        this.FirstName = FirstName;
        this.LastName = LastName;
    }
    public int EmployeeID { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

Add a controller, name it as Employee Controller and add the following Action Method in it.

public ActionResult EmployeeList([DataSourceRequest]DataSourceRequest request)
{
    try
    {
        List<Employee> _emp = new List<Employee>();
        _emp.Add(new Employee(1, "Bobb", "Ross"));
        _emp.Add(new Employee(2, "Pradeep", "Raj"));
        _emp.Add(new Employee(3, "Arun", "Kumar"));
        DataSourceResult result = _emp.ToDataSourceResult(request);
        return Json(result,JsonRequestBehavior.AllowGet);
    }
    catch (Exception ex)
    {
        return Json(ex.Message,JsonRequestBehavior.AllowGet);

    }
}

Create a New empty index view with the default layout under employee folder and add the the following code in it: 

<div class="container">
    <div class="row">

        @(Html.Kendo().Grid<KendoStart.Models.Employee>()
    .Name("EmpGrid")
    .DataSource(dataSource => dataSource
        .Ajax()

        .Read(read => read.Action("EmployeeList", "Employee"))
        )
        )
    </div>
</div>

Now, browse the Application.

 

Result 

 

 

Yeah! the Kendo grid is successfully implemented in our ASP.NET MVC Application.

 

Source Code.

I hope you enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome.