Adding Telerik UI with NuGet

This article demonstrates how to add Telerik UI components to an ASP.NET MVC Web Application by using the Telerik NuGet server. You will add the Telerik UI NuGet package and the required client-side resources manually, and then implement the Kendo UI Grid in your project by using the Telerik UI Grid HTML Helper.

To get up and running with the project:

1. Check the prerequisites
2. Create the ASP.NET MVC Web Application
3. Add the Telerik NuGet Feed to Visual Studio
4. Install the UI for ASP.NET MVC NuGet package
5. Include the Telerik UI for ASP.NET MVC client-side resources
6. Initialize the HtmlHelper
7. Build and run the application
8. Add a license file to your app

Prerequisites

• Telerik UI for ASP.NET MVC requires the .NET Framework.

• Visual Studio 2012 or later.

  For Visual Studio 2017 or later, you must install the ASP.NET & web development workload. See Microsoft's Install Visual Studio workloads documentation for guidance.

• To download the Telerik UI NuGet packages, you need a Telerik account.

Creating the Application

If you already have an existing project and you want to add Telerik UI for ASP.NET MVC to the application, skip this section and continue with adding the Telerik NuGet.

1. Open Visual Studio 2019 for Windows and select Create a new project.
2. Select ASP.NET Web Application (.NET Framework) and click Next.
3. Set a name and location for the project and click Create.
4. Select MVC and click Create.

Adding the Telerik NuGet Feed to Visual Studio

Telerik maintains a NuGet feed with official UI ASP.NET MVC releases and service packs. These packages are available for registered users with active licenses.

• If you will use a free trial license, follow these steps to add the NuGet feed to Visual Studio.
• If you have already purchased a commercial license, follow these steps to add the NuGet feed to Visual Studio.

If you have already configured the Telerik NuGet feed in Visual Studio, jump to Installing the NuGet Package.

Adding the Telerik NuGet Feed for Trial License Users

The easiest way to add the Telerik NuGet feed to Visual Studio if you are a trial user is to install the UI for ASP.NET MVC free trial:

1. Download the UI for ASP.NET MVC free trial installer. You need to create a free account if don't have one.

2. Run the installer.

3. Select the option Set up Telerik NuGet package source to automatically add the Telerik NuGet feed.

   

   The setup wizard activates your trial license when you complete the installation. This step is mandatory because the Telerik NuGet packages are available only to clients with active licenses.

Adding the Telerik NuGet Feed for Users with Commercial License

The easiest way to add the Telerik NuGet feed to Visual Studio if you purchased a commercial license is to use the Progress Control Panel:

1. Download the Progress Control Panel from the Overview page of your Telerik account.

   

2. Run the Progress Control Panel exe.

3. On the Login screen, check the set up Telerik NuGet package source option.

   

   If you miss to set up the Nuget Feed on login, go to the Progress Control Panel options and scroll to Nuget Settings. Enter your Telerik credentials and click the Save and Close button.

   

Installing the NuGet Package

Once you configure Visual Studio to access the Telerik NuGet server, you can add NuGet package with the Telerik UI components to the project:

1. Right-click the solution and select Manage NuGet Packages for Solution....

   

2. From the Package source drop-down, select the Telerik NuGet source.

3. Click the Browse tab, search for Telerik.UI.for.AspNet.Mvc5 (or Telerik.UI.for.AspNet.Mvc5.Trial), and install it.

   

When you use the NuGet package manager to install Telerik.UI.for.AspNet.Mvc5, you save time. It performs the following steps in the background:

• Adds a reference to the Kendo.Mvc.dll assembly that contains the Telerik UI for ASP.NET MVC helpers.
• Updates the web.config file to indicate the Kendo.Mvc.UI namespace where the helpers are located.

Including the Client-Side Resources

Before you can use a Telerik UI component, you must include the theme, the jQuery script, and the Kendo UI scripts:

1. Go to ~\Views\Shared\_Layout.cshtml and add the Kendo UI theme of your choice to the <head> of the document. Since Microsoft's project template uses Bootstrap, you can use the Kendo UI SASS Bootstrap theme to match it.

   <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>@ViewBag.Title - My ASP.NET Application</title>
   @Styles.Render("~/Content/css")
   @Scripts.Render("~/bundles/modernizr")
   
   @* Add the Kendo SASS Bootstrap theme: *@
   <link href="https://kendo.cdn.telerik.com/themes/10.0.1/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />
   </head>
   

2. In the _Layout.cshtml file, locate the @Scripts.Render("~/bundles/jquery") line in the <body> of the document and delete it. This jQuery script reference comes with the Microsoft ASP.NET Web Application template.

   Removing this script is crucial because in the next step you add the jQuery script provided by Telerik. Having more than one script references causes errors.

3. Add the jQuery script to the <head> tag.

   <head>
   ...
   <link href="https://kendo.cdn.telerik.com/themes/10.0.1/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />
   
   @* Add the jQuery script from the jQuery CDN: *@
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   </head>
   

4. Add the Kendo UI scripts. The Kendo UI script files required by UI for ASP.NET MVC must be loaded in the <head> tag after the jQuery script.

   <head>
   ...
   <link href="https://kendo.cdn.telerik.com/themes/10.0.1/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   
   @* Add the Kendo UI scripts: *@
   <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
   <script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min.js"></script>
   <script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.aspnetmvc.min.js"></script>
   </head>
   

5. Finally, add the bootstrap.min.js script available in Microsoft's ASP.NET Web Application template, and the <head> will look like this.

   <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>@ViewBag.Title - My Telerik MVC Application</title>
   @Styles.Render("~/Content/css")
   @Scripts.Render("~/bundles/modernizr")
   <link href="https://kendo.cdn.telerik.com/themes/10.0.1/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />
   <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
   <script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
   <script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min.js"></script>
   <script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.aspnetmvc.min.js"></script>
   
   @* Add the bootstrap.min.js script: *@
   <script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
   </head>
   

Always observe the following rules when adding client-side resources to your project:

• Put the Kendo UI script files (kendo.all.min.js and kendo.aspnetmvc.min.js) after the jquery.min.js script.
• A jQuery script must be loaded only once. It must be placed only in the <head> tag of the _Layout.cshtml file. Make sure there are no duplicate jQuery references elsewhere in the _Layout file.
• The Kendo UI scripts, the Kendo UI CSS file must use a compatible version of the theme, and the Kendo.Mvc.dll referenced in the project must be the same version as the Kendo UI script files.

If you prefer to include the Kendo UI scripts and styles from a local source instead of CDNs, refer to the Local Client-Side Resources article.

Initializing the HtmlHelper

Perform the steps below to initialize the HtmlHelper:

1. Create a model in the Models folder of the application.

   public class Product
   {
       public int ProductID { get; set; }
       public string ProductName { get; set; }
       public Nullable<decimal> UnitPrice { get; set; }
       public bool Discontinued { get; set; }
   }
   

2. Open the ~/Views/Home/Index.cshtml view or, if using ASPX, the Index.aspx file.

3. Add a Kendo UI Grid HtmlHelper.

       <div class="text-center">
           <h2>Kendo UI Grid</h2>
           @(Html.Kendo().Grid<TelerikMvcApp1.Models.Product>()
               .Name("grid")
               .Columns(columns =>
               {
                   columns.Bound(c => c.ProductID).Width(100);
                   columns.Bound(c => c.ProductName).Width(300);
                   columns.Bound(c => c.UnitPrice).Width(100);
                   columns.Bound(c => c.Discontinued).Width(200);
               })
               .DataSource(dataSource => dataSource
                   .Ajax()
                   .Read(read => read.Action("Select", "Home"))
               )
           )
       </div>
   

4. Open the HomeController.cs and import the Kendo.Mvc.UI and the Kendo.Mvc.Extensions namespaces so that you can use Kendo.Mvc.UI.DataSourceRequest and the ToDataSourceResult extension method in the next step.

   using Kendo.Mvc.Extensions;
   using Kendo.Mvc.UI;
   

Additionally, import the namespace for the model that you created in step 1.

1. In the HomeController.cs, add a new action method which will return the data as JSON. The Grid makes Ajax requests to this action.

   public ActionResult Select([DataSourceRequest]DataSourceRequest request)
   {
       var data = Enumerable.Range(1, 10)
           .Select(index => new Product
           {
               ProductID = index,
               ProductName = "Product #" + index,
               UnitPrice = index * 10,
               Discontinued = false
           });
   
       return Json(data.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
   }
   

Building and Running the Application

Press CTRL+F5 to build and run the application. As a result, the following sample page is created.

Adding Your License File

Using any client-side assets from the Kendo UI CDN or the @progress/kendo-ui NPM package requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers a banner, a watermark, and causes a warning message in the browser's console.

To generate your license file and add it to your application, follow the instructions in the Adding a License File article.

Next Steps

• Explore the Telerik UI for ASP.NET MVC fundamentals
• Grid Overview
• Integrate Telerik UI for ASP.NET MVC in Visual Studio

See Also

• Exploring the Helper Script Dependencies
• Collected Examples on ASP.NET MVC
• Collected Examples on ASP.NET Web Technologies
• Collected Examples on Telerik UI for ASP.NET MVC