KendoUI

Integrating KendoUI in your asp.net mvc project

by Sachin Singh

Posted on Thursday, 27 February 2020

Tags: How to use Kendo UI with asp.net MVC How to integrate Telerik UI for Asp.Net MVC in Visual Studio How to use Kendo UI widgets in asp.net 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 asp.net MVC project. Yes, you are at the right place.

To use KendoUI Widgets or components in your asp.net 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 Asp.net MVC is a set of server side wrappers or HTML Helpers that allow us to use kendo UI widgets in asp.net 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
or

if you have created the asp.net mvc project like you have always did earlier in your life ,with File->New->Project->Asp.net 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
  d.select 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.common.min.css",
                  "~/Content/kendo/2020.1.219/kendo.default.min.css" ));

Also create one script Bundle as mentioned below 

       
        bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
                 "~/Scripts/kendo/2020.1.219/jquery.min.js",
                 "~/Scripts/kendo/2020.1.219/kendo.web.min.js",
                 "~/Scripts/kendo/2020.1.219/kendo.all.min.js",
                 "~/Scripts/kendo/2020.1.219/kendo.aspnetmvc.min.js"
                 ));

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

        
            
             
             
              @ViewBag.Title - My ASP.NET Application
              @Scripts.Render("~/bundles/kendo")
              @Styles.Render("~/Content/Kendo")

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 
       
               @(Html.Kendo().TextBox().Name("txtName"))

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.


Like2
unlike0