Installing with Bower

Bower is a popular package manager for the web that handles frameworks, libraries, assets, and utilities.

1. Install the Package

Kendo UI for jQuery maintains the commercial Kendo UI for jQuery (Kendo UI Professional) and the open-source Kendo UI for jQuery (Kendo UI Core) Bower packages.

All official releases, service packs, and internal builds are uploaded to both distribution packages.

As of R3 2023 Kendo UI bundles does not include the jQuery library in their js directories and you should install the jQuery bower package bower install jquery or use other source for the jQuery library.

Commercial Distribution on Bower

The commercial Kendo UI Bower package is available only for commercial license holders. For more information, refer to the list of the Kendo UI components and their bundle support.

The commercial distribution package is available as a private GitHub repository. To access its content, active your subscription for Kendo UI for jQuery or DevCraft. Bower prompts you to enter your username and password during the installation and update processes.

During the installation of the Bower package, you may be requested to confirm your credentials more than once. For more information, refer to the Knowledge Base article on how to store your username and password.

To install the commercial distribution package, run the following command:

bower install https://bower.telerik.com/bower-kendo-ui.git --config.shallowCloneHosts="bower.telerik.com"

We recommend specifying shallowCloneHosts config key on bower install as enabling the bower shallow cloning speed up the download tremendously.

To check the available commercial distribution versions of the package, run the bower info kendo-ui --verbose command.

You can also add the package to the bower.json file.

"dependencies": {
    "kendo-ui": "https://bower.telerik.com/bower-kendo-ui.git#~2024.4.1112"
}

Open-Source Distribution on Bower

The open-source Bower package is available as a public GitHub repository and is also registered as kendo-ui-core in the Bower registry.

To install the Kendo UI Core Bower package, run the bower install kendo-ui-core command.

To check the available open-source distribution versions of the package, run the bower info kendo-ui-core --verbose command.

2. Add the Required JavaScript and CSS Files

Once the scripts and styles are available in your project directory, you can use the installed package directly.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Kendo UI with Bower</title>

    <link rel="stylesheet" href="bower_components\kendo-ui\styles\kendo.default-main.min.css">
    <script src="bower_components\jquery\dist\jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="bower_components\kendo-ui\js\kendo.all.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
</html>

3. Add the HTML Element for Component Initialization

Depending on the component you require, you can initialize the Kendo UI controls from different elements. In this step, you will add a new input element from which a Kendo UI DropDownList will be created.

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Kendo UI with Bower</title>

      <link rel="stylesheet" href="bower_components\kendo-ui\styles\kendo.default-main.min.css">
      <script src="bower_components\jquery\dist\jquery.min.js" type="text/javascript" charset="utf-8"></script>
      <script src="bower_components\kendo-ui\js\kendo.all.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
      <input id="ddl" />      
    </body>
</html>

4. Initialize and Configure the Component

The following example demonstrates how to initialize a DropDownList with some basic configuration.

<!DOCTYPE html>
<html lang="en">
    <head>
      <meta charset="utf-8">
      <title>Kendo UI with Bower</title>

      <link rel="stylesheet" href="bower_components\kendo-ui\styles\kendo.default-main.min.css">      
      <script src="bower_components\jquery\dist\jquery.min.js" type="text/javascript" charset="utf-8"></script>
      <script src="bower_components\kendo-ui\js\kendo.all.min.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
      <input id="ddl" />
      <script>
        $("#ddl").kendoDropDownList({
          dataTextField: "text",
          dataValueField: "value",
          dataSource: [
            { text: "Item1", value: "1" },
            { text: "Item2", value: "2" }
          ]
        });
      </script>   
    </body>
</html>

Installing with Bower

1. Install the Package

Commercial Distribution on Bower

Open-Source Distribution on Bower

2. Add the Required JavaScript and CSS Files

3. Add the HTML Element for Component Initialization

4. Initialize and Configure the Component

Next Steps

See Also

Getting Started

Community

Frameworks