RequireJS
The minified Kendo UI JavaScript files are AMD modules and work with compatible loaders, such as RequireJS, which load only the needed Kendo UI JavaScript files instead of kendo.all.min.js.
- As of 2016, the RequireJS project is mostly superseded by solutions such as 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.
Loading from Local Directories
The following example 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.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="/styles/my-kendo-styles/default-main.css" />
<!-- Include RequireJS -->
<script src="https://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": "https://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>
Using Bundle Scripts
The following example demonstrates how to use a bundle script with RequireJS.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-main.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.1/require.js"></script>
</head>
<body>
<div id="grid"></div>
<script>
require.config({
paths: {
"jquery": "https://code.jquery.com/jquery-1.9.1.min",
"jszip": "https://unpkg.com/jszip@3.10.1/dist/jszip.min",
"kendo.all.min": "https://kendo.cdn.telerik.com/2024.4.1112/js/kendo.all.min",
}
});
require([ "jquery", "jszip", "kendo.all.min" ], function($, JSZip, kendo) {
window.JSZip = JSZip;
$("#grid").kendoGrid({
toolbar:["excel"],
dataSource: {
data: [{name:"Jane Doe"}, {name:"John Doe"}]
}
});
});
</script>
</body>
</html>
Using AngularJS and Kendo UI
The following example demonstrates how to load AngularJS and initialize it with angular.bootsrap when all .js files are loaded.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-main.css" />
<script src="https://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": "https://code.jquery.com/jquery-1.9.1.min",
"kendo.all.min": "https://kendo.cdn.telerik.com/2024.4.1112/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>
Using Custom Kendo Scripts in AngularJS
The following example demonstrates how to use a custom Kendo script created with gulp with RequireJS and AngularJS. The script for the below example has been created with the following command: npx gulp custom -c dropdownlist,angular.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/10.0.1/default/default-main.css" />
<script src="https://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.6.8/angular.min",
"jquery": "https://code.jquery.com/jquery-3.1.1.min",
"kendo.angular.min": "dist/js/kendo.custom.min",
"kendo.dropdownlist.min": "dist/js/kendo.custom.min"
},
shim: {
"angular": { deps: ["jquery"] },
"kendo.angular.min": { deps: ["angular"] },
"kendo.dropdownlist.min": { deps: ["kendo.angular.min"] },
}
});
require([ "jquery", "angular", "kendo.angular.min", "kendo.dropdownlist.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>