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:

  1. Download the bundles
  2. Add the CSS and JavaScript references
  3. Initialize a widget

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 contains:

Folders Contents
/apptemplates 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 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 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:

  1. Go to www.telerik.com and log in with your credentials.
  2. Navigate to the Downloads section of your account.
  3. Search for Progress® Kendo UI® for jQuery and download the package.

Based on the preferred technologies, you can also use other approaches to add Kendo UI to a project. For more details, refer to the following articles:

Referencing the Needed CSS and JavaScript Files

To include the required by Kendo UI CSS and JavaScript files:

  1. Extract the /js and /styles directories from the downloaded bundle archive.
  2. Copy the extracted folders in the root folder of your project.
  3. 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 will find the respective sections which discuss the loading of each theme type.

Including SASS-Based Themes

Each SASS-based theme is represented by a single CSS file that combines the layout and the styling of the different components. In this way, only one CSS file needs to be referenced in your 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)

The following example shows how to 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 load a LESS-based theme to a project, at least two CSS files need to be referenced in it:

  • kendo.common.css—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 a different kendo.common.css file. For more details, refer to https://docs.telerik.com/kendo-ui/styles-and-layout/appearance-styling#common-css-files.

  • kendo.[theme name].css—Applies theme-specific styles such as color palette, background gradients, and patterns, and so on.

For more information on the different LESS themes, refer to the article on styling the appearance of widgets.

The following example shows how to 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>

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 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.

    <!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