Edit this page

Webpack

Use the Kendo UI NPM Package

The recommended approach to include Kendo UI is by using the NPM package. As of the Kendo UI 2016 Q2 SP1 release, both Kendo UI Core and Kendo UI Professional are distributed in an NPM format.

For more details, check the installation instructions.

Important

  • The typescript step is optional—the NPM package might be consumed from vanilla JavaScript or with the Babel transpiler.
  • The Kendo UI TypeScript typings are global. This means that TypeScript will complain if you try to import the kendo object. Use the global reference instead.
Example
// This won't work
import kendo from '@progress/kendo-ui-core';

// This works

import '@progress/kendo-ui-core';

console.log(kendo);

Use CDN or Packaged Kendo UI Scripts

The Kendo UI packaged scripts are in an AMD-compatible format, which means that they can be used by Webpack. This sections below demonstrate the necessary Webpack configuration for this setup.

Obtain Packaged Kendo UI Script Files

This section is intended for holders of the commercial Kendo UI Complete license.

The commercial Kendo UI distribution zip file, available for download for the active customer subscriptions has the packaged scripts available in the js directory.

Use in JavaScript and TypeScript Applications

To see the runnable examples on how to use Kendo UI with Webpack in both JavaScript and TypeScript applications, refer to the following sample repository.

Build AMD-Formatted Scripts

This section is intended for users of the Kendo UI Core open-source distribution.

The instructions for obtaining and building the Kendo UI Core scripts are listed in the README.

Once the scripts are available and present in your project directory, the Webpack configuration demonstrated in the sections below will pick and bundle them in your project.

Example
    <!DOCTYPE html>
    <html>
    <head>
      <title>Kendo UI with webpack</title>
      <!-- the styles may also be loaded with webpack -->
      <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.common.min.css">
      <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
      <meta charset="utf-8" />
      <script src="bundle.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
      <input id="ddl" />
    </body>
    </html>
    require('jquery')

    require('kendo.dropdownlist')

    $("#dropdownlist").kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
          { text: "Item1", value: "1" },
          { text: "Item2", value: "2" }
        ]
    });
    var path = require('path')
    module.exports = {
        resolve: {
            extensions: [ '', '.js', 'min.js' ],
            root: [
                path.resolve('.'),
                path.resolve('../kendo/dist/js/') // the path to the minified scripts
            ]
        },
        entry: './main',
        output: {
            filename: 'bundle.js'
        }
    }

You might test the configuration from the previous example by running the webpack-dev-server executable in the directory.

See Also

Other articles on Kendo UI integration with third-party tools and frameworks:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy