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 packagebower 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.3.806"
}
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>
Next Steps
- Create Your Own Custom Bundles
- The Component DOM Element Structure
- Initialize Components as jQuery Plugins
- Initialize Components with MVVM
- jQuery Version Support
- Web Browser Support
- Operation System Support
- PDF and Excel Export Support
- Component Script Dependencies
- Create Your Own Custom Components
See Also
- Troubleshooting When Installing with Bower
- Troubleshooting Restore Fails for ASP.NET Core MVC RC in VS 2015 When Installing with Bower
- Troubleshooting How to Store Your Username and Password.
- Hosting Kendo UI in Your Project
- 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)
- Using Script License Code