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

Adding Kendo UI in Your Project

To start using the Kendo UI for jQuery and host the library into your project, you need to download the bundles and then add the CSS and JavaScript references.

Step 1: Downloading the Bundles

To download a Kendo UI bundle, go to https://www.telerik.com/download/kendo-ui. When the download completes, here is what each folder inside the downloaded archive has:

Folders Contents
/apptemplates The folder contains standalone starter templates. Although they are static HTML files, it is recommended that you open them through a web server instead of directly from the file system. The latter approach breaks all AJAX data requests.
/examples Accommodates the quick-start demo files. Although they are static HTML files, it is recommended that you open them through a web server instead of directly from the file system. The latter approach breaks all AJAX data requests.
/js Contains the minified JavaScript files needed by Kendo UI to operates.
/license-agreements Contains the End User License Agreement that has to be read before installing Kendo UI.
/src This folder used to hold the source code files but they are now provided in a separate download package. Access the source code package from the Downloads section of your account. Note that the source code is not available to trial users.
/styles This folder contains the definitions of all SASS and LESS-based themes that Kendo UI provides.
/typescript Includes the Kendo UI TypeScript definitions
/vsdoc Includes the files that provide the intellisense
changelog.html Provides the Kendo UI release notes.

To download the commercial version of Kendo UI go to www.telerik.com and login with your credentials. Navigate to the Downloads section of your account. Search for Progress® Kendo UI® for jQuery and download the package.

Based on the preferred technologies, there are also other approaches you can use to add Kendo UI to a project. Here you can find more details about each of them:

Step 2: Referencing the needed CSS and JavaScript files to your project

To include the required by Kendo UI CSS and JavaScript files first extract the /js and /styles directories from the downloaded bundle archive. Copy the extracted folders in the root folder of your project. The next step is to include the Kendo UI JavaScript and CSS files in the head tag of your main HTML file. As the SASS and LESS-based themes structure is different, below you find two sections discussing the loading of each theme type.

Including SASS-based themes to your project

Each SASS-based theme is represented by a single CSS file that combines the layout and the styling of the different components. Thus only one CSS file has to be referenced in the project.

The CSS files defining the different Kendo UI SASS themes are as follows:

  • Kendo UI Default v.2(kendo.default-v2.min.css)
  • Kendo UI Bootstrap v.4(kendo.bootstrap-v4.min.css)
  • Kendo UI Material(kendo.material-v2.min.css)

Here is how we can define a Kendo UI project that uses the Kendo UI Default v.2 theme:

<!DOCTYPE html>
    <html>
    <head>
        <title>Welcome to Kendo UI!</title>
        <!-- Reference to the selected SASS-based theme  -->
        <link href="styles/kendo.default-v2.min.css" rel="stylesheet" />

        <!-- (Optional) Reference to the RTL(Right-To-Left) CSS file that changes the direction of all Kendo UI widgets. Include this file only if your project will be with Right-To-Left webpage direction. -->
        <link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />

        <!-- Reference to the jQuery library. It is important tha the jQuery file is loaded before the JavaScript file of Kendo UI -->
        <script src="js/jquery.min.js"></script>

        <!-- Reference to the Kendo UI JavaScript file -->
        <script src="js/kendo.all.min.js"></script>
    </head>
    <body>
        Hello World!
    </body>
    </html> 

Including LESS-based themes to your project

To load a LESS-based theme to a project at least two CSS files should be referenced in it.

  • kendo.common.css — This is a common (base) stylesheet. It applies styles related to element positioning and widget dimensions. It is a must for the widgets to look and function properly.

Some LESS themes require the loading of different "kendo.common.css" file. More details about these themes can be found here.

  • kendo.[theme name].css — This stylesheet applies theme-specific styles such as color palette, background gradients, and patterns, etc.

More about the different LESS themes can be read here.

Here is how we can define a Kendo UI project that uses the Kendo UI Default(LESS) theme:

<!DOCTYPE html>
    <html>
    <head>
        <title>Welcome to Kendo UI!</title>
        <!-- Reference to the file that is common for all Kendo UI LESS themes. This file should be referenced before the selected LESS theme.-->
        <link href="styles/kendo.common.min.css" rel="stylesheet" />

        <!-- Reference to the selected LESS-based theme  -->
        <link href="styles/kendo.default.min.css" rel="stylesheet" />

        <!-- (Optional) Reference to the RTL(Right-To-Left) CSS file that changes the direction of all Kendo UI widgets. Include this file only if your project will be with Right-To-Left webpage direction. -->
        <link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />

        <!-- (Optional) Reference to the Kendo UI Hybrid CSS file. Include only if you will use the LESS-based theme on a mobile device. -->
        <link href="styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />

        <!-- Reference to the jQuery library. It is important tha the jQuery file is loaded before the JavaScript file of Kendo UI -->
        <script src="js/jquery.min.js"></script>

        <!-- Reference to the Kendo UI JavaScript file -->
        <script src="js/kendo.all.min.js"></script>
    </head>
    <body>
        Hello World!
    </body>
    </html>

Step 3: Initializing a widget.

The examples in this step assume that all the Kendo UI scripts and stylesheets are correctly referenced.

 The following example demonstrates how to initialize the [DatePicker](https://demos.telerik.com/kendo-ui/datepicker/index) component.

    <!-- HTML element from which the DatePicker would be initialized -->
    <input id="datepicker" />
    <script>
    $(function() {
        // Initialize the Kendo UI DatePicker by calling the kendoDatePicker jQuery plugin
        $("#datepicker").kendoDatePicker();
    });
    </script>

    The following example demonstrates the full initialization of the [DatePicker](https://demos.telerik.com/kendo-ui/datepicker/index).

        <!DOCTYPE html>
        <html>
            <head>
                <title>Welcome to Kendo UI!</title>
                <link href="styles/kendo.default-v2.min.css" rel="stylesheet" />
                <script src="js/jquery.min.js"></script>
                <script src="js/kendo.all.min.js"></script>
            </head>
            <body>
                <input id="datepicker" />
                <script>
                    $(function() {
                        $("#datepicker").kendoDatePicker();
                    });
                </script>
            </body>
        </html>

Next Steps

See Also

In this article
Not finding the help you need? Improve this article