New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Using CDN

The Kendo UI client-side resources like JavaScript files and CSS files are available online through the Kendo CDN service. Including the client-side resources in your project is essential because the Telerik UI helpers are wrappers over the Kendo UI widgets.

As of the R3 2022 release, you must install a license file in your application in order to access the resources provided by the CDN service. For more information, check Using Script License File.

Only the official Kendo UI releases and serviced packs are uploaded to the CDN. Internal builds are not available on the CDN.

To access the Kendo UI CDN services, you can use either the HTTP or the HTTPS protocol with any of the following CDN services:

  • kendo.cdn.telerik.com
  • cdn.kendostatic.com (a cookieless CDN service)

To check the status of the Progress Live Services, like Kendo UI CDN, Telerik NuGet, Kendo UI Dojo playground and others, visit the Progress® Telerik® Live Services Status Page.

Understanding the CDN Structure

The URLs of the Telerik CDN have the following structure:

In the sample URLs above, you must replace [VERSION] and [FILENAME] with the client-side resource that you need and its version. For example, to load version 2022.3.1109 of the Kendo JavaScript modules and the CSS files for the Kendo Default visual theme, use these URLs:

  • https://kendo.cdn.telerik.com/2022.3.1109/mjs/kendo.all.js
  • https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-main.min.css

Adding the Required CSS Files

Adding the Kendo CSS files allows you to use the Kendo UI visual themes. The minified versions of the .css files are available in the styles folder of the Kendo CDN URL—https://kendo.cdn.telerik.com/[VERSION]/styles/[FILENAME].

To load version 2022.3.1109 of the desired visual theme, replace [VERSION] and [FILENAME] with their actual values, for example, https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.default-main.min.css.

Adding the Required JavaScript Files

To import the JavaScript files required for the Telerik UI components, apply either of the following approaches:

Using JavaScript Modules

The JavaScript modules are located in the mjs folder of the Kendo CDN URL—https://kendo.cdn.telerik.com/[VERSION]/mjs/[FILENAME].

To include a Kendo JavaScript module in your project:

  1. Use the script tag with the type=module attribute.
  2. Add a reference to the global aspnetmvc.min.js file.

The two examples below demonstrate how to include individual component modules and all available component modules:

  • Including individual component modules.

    <script src="https://kendo.cdn.telerik.com/2022.3.1109/mjs/kendo.grid.js" type="module"></script> <!-- Include the Grid module. The rest of the dependencies required by the Grid will be loaded automatically. -->
    <script src="https://kendo.cdn.telerik.com/2022.3.1109/mjs/kendo.aspnetmvc.js" type="module"></script> <!-- Include the global `kendo.aspnetmvc.js` file. -->
    
  • Including all available modules.

    <script src="https://kendo.cdn.telerik.com/2022.3.1109/mjs/kendo.all.js" type="module"></script> <!-- Include all Kendo UI modules. -->
    <script src="https://kendo.cdn.telerik.com/2022.3.1109/mjs/kendo.aspnetmvc.js" type="module"></script> <!-- Include the global `kendo.aspnetmvc.js` file. -->
    

Using Bundled JavaScript

The Kendo UI JavaScript files for the traditional format are located in the js folder of the Kendo CDN URL—https://kendo.cdn.telerik.com/[VERSION]/js/[FILENAME].

To load version 2022.3.1109 of the bundled Kendo JavaScript files, replace [VERSION] and [FILENAME] with their actual values, for example, https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js.

Using the CDN in Your Project

The following complete example demonstrates how to add the CSS files and the bundled JavaScript.

Replace the Kendo UI version from the following code snippets with the version of the product you are using—for example, 2022.3.1109.

  1. Open the layout of the application. By default, it is ~/Views/Shared/_Layout.cshtml or Site.master, if using ASPX.

  2. To add the Bootstrap theme files, include the kendo.common-bootstrap.min.css and kendo.bootstrap.min.css files. Add a link tag within the head tag of the layout. For more information on the CSS files which are used by the predefined Less themes, refer to the documentation on the Less-based themes.

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.common-bootstrap.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.3.1109/styles/kendo.bootstrap.min.css" />
    
  3. To add the JavaScript files, insert a script tag and include kendo.all.min.js and kendo.aspnetmvc.min.js after the jQuery script.

    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.aspnetmvc.min.js"></script>
    
  4. If using the Telerik MVC Scheduler helper, include kendo.timezones.min.js after kendo.all.min.js.

    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.all.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.timezones.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2022.3.1109/js/kendo.aspnetmvc.min.js"></script>
    
  5. Setup the License File by following the instructions in the Using Script License File article.

Troubleshooting

The following articles provide solutions to common issues related to the Telerik and Kendo CDN services:

Next Steps

In this article