Edit this page

RequireJS

Important

  • As of 2016, the RequireJS project is mostly superseded by solutions like Webpack, Browserify and SystemJS, which provide much more extensible API.
  • You may check the help articles on their integration too—Webpack support and SystemJS support.
  • Due to a bug, the examples below do not work with the official Kendo UI Q1 2016 release. They should work as expected with the versions 2016.1.118 and later.
  • It is not possible to load packages produced by the Download Builder using RequireJS.

The minified Kendo UI JavaScript files are AMD modules and work with compatible loaders such as RequireJS. You can use this feature to load only the needed Kendo UI JavaScript files instead of kendo.all.min.js.

Load Kendo UI Using RequireJS

Load from Local Directory

The code snippet below demonstrates how to load the Kendo UI JavaScript files from a local directory—for example, js/my-kendo-scripts. It is assumed that all Kendo UI scripts files are available there.

Example
<!DOCTYPE HTML>
<html>
    <head>
        <link rel="stylesheet" href="/styles/my-kendo-styles/kendo.common.core.min.css" />
        <link rel="stylesheet" href="/styles/my-kendo-styles/kendo.default.min.css" />
        <!-- Include RequireJS -->
        <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.js"></script>
    </head>
    <body>
        <select id="dropdownlist"></select>
        <script>
        require.config({
          baseUrl: "js/my-kendo-scripts/", // the path where the kendo scripts are present
          paths: {
            "jquery": "http://code.jquery.com/jquery-1.9.1.min",
          }
        });

        require([ "jquery", "kendo.dropdownlist.min" ], function($, kendo) {
          console.log(kendo)

          $("#dropdownlist").kendoDropDownList({
            dataSource: {
              data: [{name:"Jane Doe", value: 1}, {name:"John Doe", value: 2}]
            },
            dataTextField: "name",
            dataValueField: "value"
          });
        });
        </script>
    </body>
</html>

Use Bundle Scripts with RequireJS

The example below demonstrates how to use a bundle script with RequireJS.

Example
<!DOCTYPE HTML>
<html>
  <head>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">

    <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.js"></script>
  </head>
  <body>
    <select id="dropdownlist"></select>
    <script>
      require.config({
        paths: {
          "jquery": "http://code.jquery.com/jquery-1.9.1.min",
          "kendo.all.min": "http://kendo.cdn.telerik.com/2016.1.226/js/kendo.all.min"
        }
      });

      require([ "jquery", "kendo.all.min" ], function($, kendo) {
        $("#dropdownlist").kendoDropDownList({
          dataSource: {
            data: [{name:"Jane Doe", value: 1}, {name:"John Doe", value: 2}]
          },
          dataTextField: "name",
          dataValueField: "value"
        });
      });
    </script>
  </body>
</html>

Use AngularJS and Kendo UI with RequireJS

The example below demonstrates how to load AngularJS and initialize it with angular.bootsrap when all .js files are loaded.

Example
<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.406/styles/kendo.default.min.css">
    <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.js"></script>
  </head>
  <body>
    <div ng-controller="controller">
      <select kendo-drop-down-list k-options="options"></select>
    </div>

    <script>
      require.config({
        paths: {
          "angular": "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.12/angular.min",
          "jquery": "http://code.jquery.com/jquery-1.9.1.min",
          "kendo.all.min": "http://kendo.cdn.telerik.com/2016.1.406/js/kendo.all.min"
        },
        shim: {
          "angular": { deps: ["jquery"] },
          "kendo.all.min": { deps: ["angular"] }
        }
      });

      require([ "angular", "kendo.all.min" ], function() {
        var app = angular.module("app", ["kendo.directives"]);

        app.controller("controller", ["$scope", function($scope) {
          $scope.options = {
            dataSource: {
              data: [{name:"Jane Doe", value: 1}, {name:"John Doe", value: 2}]
            },
            dataTextField: "name",
            dataValueField: "value"
          };
        }]);

        angular.bootstrap(document, ["app"]);
      });
    </script>
  </body>
</html>

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 the information

close
Dummy