Installing with NPM

The Node Package Manager (NPM) is a popular JavaScript package manager.

This article assumes that you are familiar with the necessary steps to use browser-based libraries from NPM. Some of the tools that address this issue are Browserify, Webpack, and SystemJS. For more information on possible setups, refer to the sample repository on GitHub.

1. Install the Package

Kendo UI for jQuery maintains the commercial Kendo UI for jQuery (Kendo UI Professional) and the open-source Kendo UI for jQuery (Kendo UI Core) NPM packages.

All official releases, service packs, and internal builds are uploaded to both distribution packages.

As of R3 2023 the Kendo UI bundles do not include the jQuery library in their js directories and you can download jQuery using npm or use other source for the jQuery library.

Commercial Distribution on NPM

The commercial distribution NPM package is available as @progress/kendo-ui in the NPM registry.

As of the R2 2022 release, the @progress/kendo-ui NPM package requires a license activation.

To install @progress/kendo-ui, run the following command:

js

  npm install --save @progress/kendo-ui

Open-Source Distribution on NPM

The open-source distribution NPM package is available as kendo-ui-core on http://npmjs.com/ and is accessible without credentials.

To install kendo-ui-core, run the following command:

js

  npm install --save kendo-ui-core

2. Use the Proper NPM Channel

As of November 2019, Kendo UI for jQuery supports two separate channels for its official and internal NPM packages.

The official releases and service packs for the commercial and open-source Kendo UI distributions are uploaded in the latest channel. To install the latest official build, run npm install --save @progress/kendo-ui@latest.

The internal builds are released in the dev channel.

• To install the latest internal build, run npm install --save @progress/kendo-ui@dev.
• To install an earlier version, run npm install --save @progress/kendo-ui@2019.3.1115-internal.

3. Choose a Module System

The Kendo UI for jQuery library distributes the commercial code in the following module systems:

• (Available as of v2022.3.1109) ECMAScript—The script files are located in the esm folder.
• (Available as of v2022.3.1109) UMD—The script files are located in the umd folder.
• CommonJS—The script files are located in the js folder.

4. Bundling the Scripts

As of the 2022.3.1109 version, the package.json file comes with three fields related to bundling:

• module—Points to the ECMAScript kendo.all.js script in the esm folder.
• main—Points to the CommonJS kendo.all.js script in the js folder.
• browser—Points to the UMD kendo.all.min.js script in the umd folder.

To bundle the Kendo UI scripts by using one of the module systems, you can use a plugin such as rollup. For more information on working with different module bundlers, see Module Bundlers and Webpack Support.

Starting from version 2023.3.718, the kendo instance is exported as a default export for the CommonJS and ECMAScript modules. This allows you to:

• Use the import kendo from "@progress/kendo-ui" syntax to import the Kendo UI scripts in your application.
• Use the kendo instance to get the jQuery in which the Kendo UI components are defined. For example, const $ = kendo.jQuery; $("#grid").kendoGrid({...});.

ECMAScript

To bundle the ECMAScript files:

1. Add a rollup configuration file in the main directory of your project.

   javascript

    // rollup.config.js
    import { nodeResolve } from "@rollup/plugin-node-resolve";
   
    export default {
       input: "index.js",
       output: [{
         file: "dist/bundled.js",
         sourcemap: "inline",
         globals: {
           jquery: "$"
         }
       }],
       external: ["jquery"],
       treeshake: false,
       plugins: [
         nodeResolve()
       ]
     }

2. Use the import keyword to include the Kendo UI scripts in your application:

   javascript

   // index.js file located in the main directory of your project (same level as rollup.config.js).
   
   import "jquery";
   import "@progress/kendo-ui";
   
   // A sample Kendo UI component in your project.
   $("#grid").kendoGrid({...grid configs...});

3. Open a terminal and execute the rollup command. As a result, the bundled script is located in the dist/bundled.js folder of your project.

   javascript

   npx rollup -c

CommonJS

To bundle the CommonJS files:

1. Add a rollup configuration file in the main directory of your project.

   javascript

    // rollup.config.js
    import { nodeResolve } from "@rollup/plugin-node-resolve";
    import commonjs from "@rollup/plugin-commonjs";
   
    export default {
       input: "index.js",
       output: [{
         file: "dist/bundled.js",
         sourcemap: "inline",
         globals: {
           jquery: "$"
         }
       }],
       external: ["jquery"],
       treeshake: false,
       plugins: [
         commonjs(), // Add the commonjs plugin.
         nodeResolve()
       ]
     }

2. Use the require keyword to include the Kendo UI scripts in your application:

   javascript

   // index.js file located in the main directory of your project (same level as rollup.config.js).
   
   require("jquery");
   require("@progress/kendo-ui");
   
   // A sample Kendo UI component in your project.
   $("#grid").kendoGrid({...grid configs...});

3. Open a terminal and execute the rollup command. As a result, the bundled script is located in the dist/bundled.js folder of your project.

   javascript

   npx rollup -c

UMD

To bundle the UMD files:

1. Add a rollup configuration file in the main directory of your project.

   javascript

    // rollup.config.js
    import { nodeResolve } from "@rollup/plugin-node-resolve";
   
    export default {
       input: "index.js",
       output: [{
         file: "dist/bundled.js",
         sourcemap: "inline",
         globals: {
           jquery: "$"
         }
       }],
       external: ["jquery"],
       treeshake: false,
       plugins: [
         nodeResolve({
           browser: true // Let rollup know that it has to use the browser field from the package.json file when creating the bundle. The browser field points to the UMD modules by default.
         })
       ]
     }

2. Use the import keyword to include the Kendo UI scripts in your application:

   javascript

   // index.js file located in the main directory of your project (same level as rollup.config.js).
   
   import "jquery";
   import "@progress/kendo-ui";
   
   // A sample Kendo UI component in your project.
   $("#grid").kendoGrid({...grid configs...});

3. Open a terminal and execute the rollup command. As a result, the bundled script will be located in the dist/bundled.js folder of your project.

   javascript

   npx rollup -c

Latest Export Settings

As of 2024.4.1112 the @progress/kendo-ui NPM package introduce a more fine-grained exports setting to satisfy various module bundlers and easy its usage in the NPM ecosystem.

javascript

"@progress/kendo-ui" //Imports the kendo.all.js 
"@progress/kendo-ui/*.js" //Imports the files corresponding to the module system used - ESM or CJS.
"@progress/kendo-ui/esm" //Imports kendo.all.js only for ESM.
"@progress/kendo-ui/esm/*.js" //Imports the files for ESM.
"@progress/kendo-ui/cjs" //Imports kendo.all.js only for CJS.
"@progress/kendo-ui/esm/*.js" //Imports the files for CJS.
"@progress/kendo-ui/umd" //Imports kendo.all.min.js only for UMD.
"@progress/kendo-ui/umd/*.js" //Imports the files for UMD.

Examples

javascript

import "@progress/kendo-ui"; //Imports the kendo.all.js 

javascript

import "@progress/kendo-ui/esm"; //Imports kendo.all.js only for ESM.

javascript

import "@progress/kendo-ui/kendo.grid.js"; //Imports the Grid related files corresponding to the module system used - ESM or CJS.

javascript

import "@progress/kendo-ui/esm/kendo.grid.js"; //Imports the Grid related files for ESM.

Known Issues

• The Progress NPM registry was retired in favor of npmjs.com. To start using the default registry, remove the two lines which contain registry.npm.telerik.com from your .npmrc file.
• The scripts in the NPM package are not usable in the browser. To work around this issue, use a bundler such as WebPack.
• After May 2017, the kendo legacy package that is available as a GitHub repository and is accessible through git+https://bower.telerik.com/npm-kendo-ui/npm-kendo.git will no longer be updated but will remain active.

Next Steps

• Create Your Own Custom Bundles
• Work with Module Bundlers
• Use Kendo UI with Webpack
• 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
• Create Your Own Custom Components

See Also

• Module Bundlers
• Webpack Support
• Troubleshooting When Installing with NPM
• Hosting Kendo UI for jQuery in Your Project
• Installing Kendo UI for jQuery with Bower
• Installing Kendo UI for jQuery by Using the CDN Services
• Installing Kendo UI for jQuery with NuGet
• Getting Up and Running with Your Kendo UI for jQuery Project (Guide)
• Licensing Overview