Demos About Pricing Try now
Edit this page

Getting Started with Progress® Kendo UI®

Depending on your preferences and the requirements of your project, you can:

Hosting Kendo UI in Your Project

To host Kendo UI in your project, you need to:

Download the Bundles

After you download any of the Kendo UI bundles, the folders listed below are hosted in your local repository.

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.
/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 Consists of the minified CSS files and theme images. The folder also includes the Less files, which can be passed to the compiler, located on the first-level folders inside styles/folder: styles/web/ and styles/mobile/. Note that the Less files are not available in the trial version.
/wrappers Includes the server-side wrappers. As it is necessary for the UI for ASP.NET MVC, UI for JSP or UI for PHP distributions only, the folder is available in the commercial packages of these versions.
changelog.html Provides the Kendo UI release notes.

Add CSS and JavaScript References

To use Kendo UI in your project, include the required JavaScript and CSS files.

Step 1 Extract the /js and /styles directories from the bundle archive and copy them to your web application root directory.

Step 2 Include the Kendo UI JavaScript and CSS files in the head tag of your HTML document. Verify that the common CSS file is registered before the theme CSS file.

Example
    <!DOCTYPE html>
        <html>
        <head>
            <title>Welcome to Kendo UI!</title>
            <!-- Common Kendo UI CSS for web widgets and widgets for data visualization. -->
            <link href="styles/kendo.common.min.css" rel="stylesheet" />

            <!-- (Optional) RTL CSS for Kendo UI widgets for the web. Include only in right-to-left applications. -->
            <link href="styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />

            <!-- Default Kendo UI theme CSS for web widgets and widgets for data visualization. -->
            <link href="styles/kendo.default.min.css" rel="stylesheet" />

            <!-- (Optional) Kendo UI Hybrid CSS. Include only if you will use the mobile devices features. -->
            <link href="styles/kendo.default.mobile.min.css" rel="stylesheet" type="text/css" />

            <!-- jQuery JavaScript -->
            <script src="js/jquery.min.js"></script>

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

Important

The code examples onwards assume that the Kendo UI scripts and stylesheets are now added to the document.

Step 3 Initialize a Widget.

The following example demonstrates how to initialize the DatePicker widget.

Example
    <!-- 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 widget.

Example
<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to Kendo UI!</title>
        <link href="styles/kendo.common.min.css" rel="stylesheet" />
        <link href="styles/kendo.default.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>

Installing Bower Packages

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

Overview

Kendo UI maintains 2 Bower packages:

  • Kendo UI Core.
  • Kendo UI Professional.

All official releases, service packs, and internal builds are uploaded to both of them. For more information, refer to the article on installing the Kendo UI Bower packages.

Delimiter for Recurrence Exceptions

As of the Kendo UI 2016 Q2 (2016.2.504) release:

  • The Scheduler substitutes the semicolon (;) as the delimiter type for recurrence exception with the comma (,).
  • The Scheduler no longer adds a trailing delimiter to a recurrence exception.

The change was driven by the RFC 5545 specification. Note that the previously demonstrated behavior had been incorrect.

Using CDN Services

Kendo UI CDN is hosted on Amazon CloudFront. To access the CDN Service, you can use different approaches. For more information, refer to the article on installing the Kendo UI CDN Service.

Including Only What You Need

Add to your project only what it requires by picking the right combined scripts, building a custom combined script, or using Gulp to build a custom script. For more information, refer to the article on customizing the scripts you need.

See Also

Other articles on getting started with Kendo UI:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy