New to Kendo UI for jQuery? Download free 30-day trial

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.

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 bower install https://bower.telerik.com/bower-kendo-ui.git command.

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#~2022.2.802"
}

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\kendo-ui\js\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 Widget Initialization

Depending on the widget 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\kendo-ui\js\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 Widget

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\kendo-ui\js\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>

Next Steps

See Also

In this article