Posted on 2/27/2020 9:32:44 AM by Admin

Integrating KendoUI in your asp.net mvc project

you have landed into this article meaning either you have heard of KendoUI from somewhere or your company has decide to use KendoUI in their projects. It is also possible that you are self taught developer who want to learn KendoUI and use components of this fantastic framework in your future asp.net mvc project. Yes, you are at the right place.

In order 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.To download the free trial version go to Telerik UI for Asp.Net MVC 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.