Edit this page

SystemJS

The Kendo UI packaged scripts are in an AMD-compatible format, which means that they can be used by SystemJS. This article illustrates the necessary SystemJS 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 stored in the js directory.

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

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

Important

We suggest using SystemJS with version 0.19.*. With 0.20.*, SystemJS dropped the wildcard support and changed entirely the script loading mechanism.

    <!DOCTYPE html>
    <html>
    <head>
      <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.rtl.min.css">
      <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.112/styles/kendo.default.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.16/system.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
      <input id="ddl" />

      <script type="text/javascript" charset="utf-8">
        System.config({
          map: {
            traceur: "https://google.github.io/traceur-compiler/bin/traceur.js",
            jquery: '//code.jquery.com/jquery-2.1.4.min.js'
          },

          paths: {
            'kendo.*': "../kendo/dist/js/kendo.*.js"
          }
        })

        System.import('./main.js');
      </script>
    </body>
    </html>
    import $ from 'jquery'
    import 'kendo.dropdownlist'

    $("#ddl").kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: [
          { text: "Item1", value: "1" },
          { text: "Item2", value: "2" }
        ]
    });

See Also

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