Creating Your Own Custom Bundles

Depending on your project, you may need to skip some of the Kendo UI utilities and install only what your application requires.

To facilitate the customization of your project, Kendo UI for jQuery delivers a set of combined and individual scripts, and also provides further options for scripts customization.

• The combined scripts bundles contain the scripts of specific types of widgets (for example, desktop, hybrid) available for the different Kendo UI distributions.

• The individual scripts bundles contain the scripts of widgets grouped by their common functionality (for example, Charts, Editors) so that you can select which individual control to add to your project.

• You can also further customize your project by creating your custom scripts which will add the specific widgets and features of your project requirements.

• As of version 2022.3.1109, you can use ECMAScript to import individual modules in your application. The related dependencies will be automatically bundled alongside their respective modules. This will save you the trouble of having to manually select which scripts to include in your project.

Combined Scripts

To facilitate the common project types, Kendo UI ships the following combined scripts in the bundles or on CDN:

• The kendo.ui.core.min.js contains all widgets supported by the Kendo UI Core distribution. The relevant script is available in the Kendo UI Core package as well.

• The kendo.all.min.js contains a minified version of all features provided by Kendo UI.

  The kendo.all.min.js is available in the Kendo UI Professional, Telerik UI for ASP.NET MVC, Telerik UI for ASP.NET Core, Telerik UI for JSP and Telerik UI for PHP bundles. However, the kendo.all.min.js does not include the kendo.aspnetmvc.min.js. To install it, add kendo.aspnetmvc.min.js to kendo.all.min.js, or use the custom download builder tool.

• The kendo.web.min.js includes the core framework and all desktop browser widgets (previously distributed as Kendo UI Web). It is available in Kendo UI Professional, JSP, PHP, MVC and Core.

• The kendo.dataviz.min.js includes the core framework and all data visualization widgets (previously distributed as Kendo UI DataViz). It is available in Kendo UI Professional, JSP, PHP, MVC and Core.

• The kendo.mobile.min.js includes the core framework and all mobile device specific widgets (previously distributed as Kendo UI Mobile). It is available in Kendo UI Professional, JSP, PHP, MVC and Core.

  Only one of the combined JavaScript files can be included at a time, because they include the Kendo UI framework. To simultaneously use widgets from different Kendo UI suites, use the kendo.all.min.js or build a custom script.

  Do not register any of the combined script files together with an individual widget script from the same suite. For example, do not register kendo.grid.js together with kendo.web.js or kendo.all.js because they already include the Grid scripts.

  Registering duplicate scripts might cause JavaScript errors and unexpected behavior.

Individual Scripts

The following list provides the references to the script files which, whether minified or not, and depending on your project, can be included on a per-widget basis.

• List of Kendo UI widgets in terms of their bundle support
• Script Files for Data Management
• Script Files for Editors
• Script Files for Charts
• Script Files for Gauges
• Script Files for Barcodes
• Script Files for Diagrams and Maps
• Script Files for Scheduling
• Script Files for Layout
• Script Files for Navigation
• Script Files for Interactivity and UX
• Script Files for Hybrid UI
• Script Files for Tools, Frameworks and Utilities
• Script Files for Server-Side Wrappers

Custom Scripts

You can create custom scripts that provide only the widgets and features your project requires.

Employing the Download Builder

Users with a commercial license might use the custom Download Builder tool to create a single JavaScript file which contains only the required widgets and features.

• Do not use multiple custom combined scripts, as they will contain duplicate code. Instead, create one combined script file, which includes everything you need.
• It is not possible to load Download Builder packages by using RequireJS because the tool will not create the required AMD modules.

Using Gulp

If you use the Kendo UI Core package, you can build a custom distribution by using the gulp build tool and by following the instructions in the README article. As of the Kendo UI 2014 Q3 release, the necessary build scripts are shipped in the src/ directory of the downloadable commercial bundles.

To build a custom distribution from the shipped source:

1. Run the following shell commands.

         cd src
         npm install
         npx gulp custom -c autocomplete,dropdownlist
   

2. List the components you want to be included in the custom build and separate them with a comma (,). The previous example builds a custom minified script which includes the AutoComplete and the DropDownList widgets.

3. Build the entire Kendo UI library by running npx gulp custom -c all.

   When complete, the gulp command outputs a kendo.custom.min.js file in the src/dist directory. The Gulp build task automatically resolves the needed dependencies for each component, so you do not have to list them. Do not use multiple custom combined scripts, as they will contain duplicate code. Instead, create one combined script file, which includes everything you need.

4. To compile a custom script version that is not minified, remove or comment out the following line from the gulpfile.js:

         ...
         .pipe(uglify())
         ...
   

Order of Tags

To load and execute the scripts after the HTML markup, place the script tags before the closing body tag. Usually, the Kendo UI widget initialization statements are executed in the document.ready event through a jQuery handler which means that you have to register jQuery before any Kendo UI widget initialization statements. When using the client-side Kendo UI widgets, you can control the placement of the initialization statements so that the jQuery script file can be registered at the bottom of the document.

The server-side wrappers for the Kendo UI widgets are self-initialized which means that each initialization script is rendered right after the HTML markup of the widget. In such cases, the Kendo UI scripts can still be registered at the end of the document while the jQuery script must be registered in the body before the first Kendo UI widget on the document, or in the document head.

Next Steps

• Learn about the widget DOM element structure
• Initialize widgets as jQuery plugins
• Initialize widgets with MVVM
• Check out the jQuery version support
• Check out the web browser support
• Check out the operation system support
• Check out the PDF and Excel export support
• Explore the widget script dependencies
• Create your own custom widgets

See Also

• Hosting Kendo UI in Your Project
• Installing Kendo UI with Bower
• Installing Kendo UI by Using the CDN Services
• Installing Kendo UI with NPM
• Installing Kendo UI with NuGet
• Getting Up and Running with Your Kendo UI Project (Guide)