Using CDN with Telerik UI for ASP.NET Core

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 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 CDN service have the following structure:

• https://kendo.cdn.telerik.com/themes/[THEMEVERSION]/default/[FILENAME]—The themes folder contains the .css files of the SASS themes for Telerik UI for ASP.NET Core versions after R1 2023 SP1.
• https://kendo.cdn.telerik.com/[VERSION]/styles/[FILENAME]—The styles folder contains the .css files (SASS and LESS) for Telerik UI for ASP.NET Core versions before R1 2023 SP1.
• https://kendo.cdn.telerik.com/[VERSION]/mjs/[FILENAME]—The mjs folder contains the JavaScript modules.
• https://kendo.cdn.telerik.com/[VERSION]/js/[FILENAME]—The js folder contains the bundled Kendo UI JavaScript files.

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

• https://kendo.cdn.telerik.com/2024.4.1112/mjs/kendo.all.js
• https://kendo.cdn.telerik.com/themes/10.0.1/default/default-main.css

Adding the Required CSS Files

Adding the Kendo CSS files allows you to use the Kendo UI visual themes. The .css files are available in the themes folder of the Kendo CDN URL—https://kendo.cdn.telerik.com/themes/<version>/<theme>/<swatch>.css.

To load version 10.0.1 of the desired visual theme, replace [THEMEVERSION] and [FILENAME] with their values, for example, https://kendo.cdn.telerik.com/themes/10.0.1/default/default-main.css.

Adding the Required JavaScript Files

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

• Using the JavaScript modules—A new approach introduced with version 2022.3.1109.
• Using the bundled JavaScript—The traditional way of including the Kendo UI scripts.

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/2024.4.1112/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/2024.4.1112/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/2024.4.1112/mjs/kendo.all.js" type="module"></script> <!-- Include all Kendo UI modules. -->
  <script src="https://kendo.cdn.telerik.com/2024.4.1112/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 2024.4.1112 of the bundled Kendo JavaScript files, replace [VERSION] and [FILENAME] with their values, for example, https://kendo.cdn.telerik.com/2024.4.1112/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 Telerik UI for ASP.NET Core version in the script src attribute with the version of the product you are using—for example, 2024.4.1112. Replace the theme version in the stylesheet href attribute with the respective version of the theme you are using.

1. Open the layout of the application. By default, it is ~\Views\Shared\_Layout.cshtml.

2. To add the Bootstrap theme files, insert a link tag within the head tag of the layout and include the style file or files.

        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/bootstrap/bootstrap-main.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/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>
   

4. 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:

• CDN connection issues and general disruption occur
• How to refer Kendo UI internal builds from a CDN

Next Steps

• Explore the helper script dependencies

• Using ECMAScript Modules

  See Also

• Including Client-Side Resources

• Installing Telerik UI for ASP.NET Core with NuGet

• First Steps on Visual Studio for Windows (Online Guide)

• First Steps with CLI (Online Guide)