Integrating KendoUI in your mvc project

by Sachin Singh

Posted on Thursday, 27 February 2020

Tags: How to use Kendo UI with MVC How to integrate Telerik UI for Asp.Net MVC in Visual Studio How to use Kendo UI widgets in mvc project Learn Kendo UI step by step

you have landed into this article meaning either you have heard of Kendo UI from somewhere or your company has decided to use Kendo UI in their projects. It is also possible that you are a self-taught developer who wants to learn KendoUI and use components of this fantastic framework in your future MVC project. Yes, you are at the right place.

To use KendoUI Widgets or components in your MVC project, you need to follow the below steps:-

1.Download/Install Telerik UI for ASP.NET MVC, free or commercial version. Telerik UI for MVC is a set of server side wrappers or HTML Helpers that allow us to use kendo UI widgets in mvc.

2.Open Visual Studio and you will see a new extension with the name Telerik has been added to the menu bar.Go to kendo UI and create new Kendo UI project.It will add all the kendo CSS and Scripts to your content and Script folder of the project respectively.

Create Kendo UI Project
Create a New Kendo UI Project in Visual Studio

if you have created the mvc project like you have always did earlier in your life ,with File->New->Project-> mvc then go to the location of installation usually it is C:\Program Files (x86)\Progress\Telerik UI for ASP.NET MVC R1 2020 Now copy and paste the Style and JS folder for Kendo into your project.

3.Add reference for Kendo.MVC
  a.Right click the references
  b.Add reference
  c.Browse to the path C:\Program Files (x86)\Progress\Telerik UI for ASP.NET MVC R1 2020\wrappers\aspnetmvc\Binaries\Mvc5 Kendo.MVC.dll and press ok.

4.Create Style and Script bundles for kendo CSS and JS scripts
  a.Go to App Start
  b.Bundle Config.cs
and create a style bundle as given below

         bundles.Add(new StyleBundle("~/Content/Kendo").Include(
                  "~/Content/kendo/2020.1.219/kendo.default.min.css" ));

Also create one script Bundle as mentioned below

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

5.Render the Style and Script in your Layout.cshtml as below

              @ViewBag.Title - My ASP.NET Application

Now you are completely ready to use kendo components in your project . Using a kendo component is as easy as using Html helpers in mvc.

Create a controller and an action and add view to that action

                  public ActionResult Index()
                        return View();
Now in the view paste the below code

Press Ctrl+F5 ,if it is running without any error then congrats you have successfully used kendo Textbox in your project. Note:-If you are getting the error that Kendo is not a function then most probably you have included jquery twice.Debug and resolve the issue.