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>
Next Steps
- Create Your Own Custom Bundles
- The Component DOM Element Structure
- Initialize Components as jQuery Plugins
- Initialize Components with MVVM
- jQuery Version Support
- Web Browser Support
- Operation System Support
- PDF and Excel Export Support
- Component Script Dependencies
- Create Your Own Custom Components
See Also
- Troubleshooting When Using Kendo UI CDN services
- Troubleshooting When Trying to Refer Kendo UI Internal Builds from CDN
- Hosting Kendo UI in Your Project
- Installing Kendo UI with Bower
- Installing Kendo UI with NPM
- Installing Kendo UI with NuGet
- Getting Up and Running with Your Kendo UI Project (Guide)
- Using Script License Code