Webpack

The recommended approach to include Kendo UI is by using the NPM package.

Using NPM

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, refer to the installation instructions.

  • 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.
// This won't work
import kendo from '@progress/kendo-ui-core';

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

console.log(kendo);

Using CDN or Packaged 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.

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

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

Building AMD-Formatted Scripts

(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. To test the configuration of the following example, run the webpack-dev-server executable in the directory.

    <!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'
        }
    }

See Also

In this article
Not finding the help you need? Improve this article