Thursday, October 8, 2015

Adding Telerik Kendo UI to an ASP.NET MVC Web Application

If you are just starting off with Kendo UI and ASP.NET MVC, then it might be easier to create a brand new ASP.NET MVC Application using the "Telerik MVC Web Application" project template provided to you when you install UI for ASP.NET MVC.

However, if you already have an existing ASP.NET MVC Web Application and are looking to leverage Kendo UI in your application, there are a few steps to take into account:

  1. If you are using an existing ASP.NET MVC Layout file, the bundling of the jQuery Libraries occurs at the bottom of the file.  Unfortunately, this interferes with the functionality of Kendo UI (even if you add the Kendo UI scripts after the jQuery Library).  Therefore, you need to either use a custom Layout file or you need to move the bundling of the jQuery Library to the top of the Layout file.
  2. If you are using bundling in your ASP.NET MVC application, since Kendo UI only ships with minified versions, you will need to set BundleTable.EnableOptimizations = false; in the BundleConfig.cs file.
  3. Now, you have to configure your solution/web application project to be able to use the Kendo UI libraries.
  4. You will need to add the Kendo.MVC assembly as a project reference
  5. You will need to add all of the Kendo CSS files to the Content\kendo directory of your ASP.NET MVC project.
  6. You will need to add all of the Kendo Script files to the Scripts\kendo directory of your ASP.NET MVC project.
  7. In order to get appropriate Intellisense for your development in Views, you will need to add the Kendo.Mvc.UI namespace to BOTH your Views Web.config file and your root Web.config file (under the pages/namespaces element)
  8. If you are using the Kendo MVC HTML Helpers, you will also need to add the @using Kendo.Mvc.UI imports statement to the top of the Razor View files.
Once you complete these above items, you should be ready to be able to use Kendo UI within your existing ASP.NET MVC web application project.

Alternatively, you can now use the Telerik Configure Project Wizard as follows:

  1. Select or highlight the ASP.NET MVC project you want to target for Kendo UI support in Visual Studio Solution Explorer
  2. From the Telerik-->UI for ASP.NET MVC menu, select Configure Project
  3. Proceed through the wizard until your project is upgraded with Kendo UI support

No comments:

Post a Comment