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.

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 script license activation.

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

  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:

  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.

ECMAScript

To bundle the ECMAScript files:

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

    // 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:

   // 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.

   npx rollup -c
   

CommonJS

To bundle the CommonJS files:

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

    // 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:

   // 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.

   npx rollup -c
   

UMD

To bundle the UMD files:

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

    // 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:

   // 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.

   npx rollup -c
   

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
• 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 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)
• Using Script License Code