Using CDN

The Kendo UI for jQuery CDN resides on the Amazon CloudFront. The service maintains the official Kendo UI for jQuery releases and service packs, and provides no access to internal builds.

As of the R3 2022 release, you need to activate the CDN distribution by using a license file.

1. Add the Required JavaScript and CSS Files

The https://da7xgjtj801h2.cloudfront.net/ URL remains active but is no longer recommended for new projects.

The Kendo UI CDN provides the following services:

kendo.cdn.telerik.com
(Without cookies) cdn.kendostatic.com

Adding the Required CSS Files

The .css files are available at https://kendo.cdn.telerik.com/themes/<version>/<theme>/<swatch>.css. For example, you can load the 10.0.1 version of the Default theme from the https://kendo.cdn.telerik.com/themes/10.0.1/default/default-main.css location.

Starting with the 2023 R3 release the font icons are detached from the Kendo Themes CDN. You can find more details on how to reference the icons in your project here.

Adding the Required JavaScript Files

To import the required JavaScript files for the Kendo UI for jQuery components, use either of the following approaches:

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

JavaScript Modules

The JavaScript modules are located in the /mjs/ folder. To include a JavaScript module in your project, use the script tag with the type=module attribute.

The following example demonstrates how to include 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. -->

The following example showcases how to include 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. -->

Bundled JavaScript

The bundled version of the Kendo UI for jQuery library is available at https://kendo.cdn.telerik.com/VERSION/js/FILENAME.min.js. For example, you can load the 2024.4.1112 version from the https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min.js location.

The minified Kendo UI for jQuery scripts are available as of the Kendo UI Q1 2014 SP1 release. To load them, use the https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.ui.core.min.js URL.

2. Set Up the License File

Generate a license file and follow the instructions.

3. Add the HTML Element for Component Initialization

Depending on the component you require, you can initialize the Kendo UI controls from different elements. In this step, you will add a new input element from which a Kendo UI DropDownList will be created.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Kendo UI using CDN</title>

        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-main.css" />

        <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min.js"></script>
    </head>
    <body>
      <input id="ddl" />      
    </body>
</html>

4. Initialize and Configure the Component

The following example demonstrates how to initialize a DropDownList with some basic configuration.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Kendo UI using CDN</title>

        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-main.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>
    </head>
    <body>
      <input id="ddl" />
      <script>
        $("#ddl").kendoDropDownList({
          dataTextField: "text",
          dataValueField: "value",
          dataSource: [
            { text: "Item1", value: "1" },
            { text: "Item2", value: "2" }
          ]
        });
      </script>   
    </body>
</html>

Using CDN

1. Add the Required JavaScript and CSS Files

Adding the Required CSS Files

Adding the Required JavaScript Files

JavaScript Modules

Bundled JavaScript

2. Set Up the License File

3. Add the HTML Element for Component Initialization

4. Initialize and Configure the Component

Next Steps

See Also

Getting Started

Community

Frameworks