× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Getting Started with Kendo UI for Web Applications

This article will discuss the main features of this development framework that uses JavaScript, AJAX and HTML 5

All developers need to develop web applications using dynamic features such as HTML 5 and the interest in this development is growing, as it is a platform of constant evolution to increasingly interactive, robust, complex and interesting applications..

Many factors are involved in the development of quality web applications, and their ability to adapt to different devices (responsiveness). .

This and other important activities in the creation of the app can be performed with a high degree of ease when using the right tools, such as Kendo UI.

It is a framework that brings together a series of user-friendly features that we will present below. Butfirst, let’s discuss what Kendo UI is.

Kendo UI

It is an interface framework with HTML5 user, which allows the construction of sites and interactive applications, with high performance. This has a library of over 70 widgets for graphical interfaces construction and manipulation, as well as an abundant aggregating devices for data visualization and source of client-side data. Another detail are libraries for development that are based on technical Model-View-View-Model (MVVM), which is very similar to the MVC, but this has an intermediate view layer to interact with the Model bed, which is isolated.

The Kendo UI also provides integration with other two frameworks: the Bootstrap and AngularJS, facilitating the development even more, because an application can be distributed in places where each can be developed in one of them according to the needs of your project.

The Kendo is divided into Kendo UI Core, Kendo UI Professional and Kendo UI Complete. And we will know each of the following best:

  • Kendo UI Core: This is the Open Source version of Kendo UI, where the developer can count on a framework for building modern applications, web and mobile, using JavaScript and HTML5, in addition to more than 40 widgets based on jQuery, among other features structural. This is the right package for small and medium sized projects and study further along this article;
  • Kendo UI Professional: This is one of UI Kendo commercial versions and has a library with more than 70 widgets, plus a simple and consistent programming interface and a solid source of data with various themes and more. Among the widgets available in this version are a few that allow the development of applications at the enterprise level, thus ensuring all necessary support for the development of professional web sites;
  • Kendo UI Complete: It is the most complete versions, it incorporates all family products Kendo UI Professional, including UI for ASP.NET MVC, UI for JSP and UI for PHP; the UI for ASP.NET MVC: It is a supplement that targets the public ASP.NET MVC developers. It includes all professionals Kendo UI components, plus HtmlHelper extension methods that allow you to configure the Kendo UI widgets using C # code; the UI for JSP: It is a supplement that has as target web application developers in Java. Includes Kendo UI professional components, and tags for all your widgets are accessed via JSP; the UI to PHP: Are complements Kendo UI to PHP developers, including PHP classes to configure all UI Kendo practitioners widgets.

Below we see in practice some components of the free version of Kendo UI.

Installing and configuring the Kendo UI Core

Before we install the framework, we need some pre-requirements. The first is the jQuery v1.9.1 + package (see Links section). The Core UI Kendo has not been tested with other packages, then it can not guarantee its smooth operation if the jQuery version is lower than indicated.

In addition, we need to get the sources of the framework. There are two ways to do that: through the site's zip Teletrik.com your distributor, or through Gulp (links are the links section). The latter means including an option to build a Kendo UI distribution which contains only what it deems necessary for the development of your application. However, the first option is strongly recommended for those just starting development., and is the one used in this article.

After unpacking the zip, the folder where it is installed will have the following structure:

  • /examples - This folder stores demo files. Although they are static HTML, it is recommended that they be opened through a web server. This is due to the fact that some of these use AJAX features;
  • /js - stores the JavaScript files;
  • /styles - stores the CSS files and thematic images. This folder also includes other files that can be sent to the compiler, located in folders style /folder: styles/web/estyles/mobile /. However, many of these files are not available in trial version;
  • changelog.html - contains information on updates, patches and other for the Kendo UI;
  • /wrappers - contains the server-side files. This folder is available only for the commercial versions of the framework; and
  • /src - keeps source code files. This folder is not available in the trial version.

Using Kendo UI in web projects

In order to enjoy all the UI Kendo resources, we have some settings to make. For example, to use it in a web design you must include the CSS and JavaScript files required. For this we must copy the folders /js and /styles to the web application root, and then add the UI Kendo JavaScript and CSS files in the HTML HEAD tag of the web application. Also make sure that the Common CSS file is being recorded before the Theme CSS file, as shown in the example in Listing 1.

Listing 1. Example UI Kendo configuration for web projects.

. <! DOCTYPE html>
  2. <html>
  3. <head>
  4. <title> Welcome to Kendo UI! </ Title>
  5. <! - Common Kendo UI CSS for web widgets and DataViz ->
  6. <link href = "styles/kendo.common.min.css" rel = "stylesheet" />
  8. <! - (Optional) Kendo UI Web widgets' RTL CSS, include only in right-to-left applications ->
  9. <link href = "styles/kendo.rtl.min.css" rel = "stylesheet" type = "text/css" />
  11. <! - Default Kendo UI theme CSS for web widgets and DataViz ->
  12. <link href = "styles/kendo.default.min.css" rel = "stylesheet" />
  14. <! - (Optional) Kendo UI Mobile CSS, include only if you will use the mobile devices features ->
  15. <link href = "styles/kendo.default.mobile.min.css" rel = "stylesheet" type = "text/css" />
  17. <! - JQuery JavaScript ->
  18. <script src = "js/jquery.min.js"> </ script>
  20. <! - Kendo UI combined JavaScript ->
  21. <script src = "js/kendo.all.min.js"> </ script>
  22. </ head>
  23. <body>
  24. Hello World!
  25. </ body>
  26. </ html>

All set, now just enjoy all the features offered by Kendo UI Core, and some of these features will be presented in the next section.

Web Framework

This category will be listed components / resources specific to the development of web applications. Examples of codes and how to integrate them into their applications can be found in the Core UI Kendo itself, the examples folder. These are not posted here. Only the most important ones are.

DataSource: It plays a central role in virtually all web applications built with Kendo UI. It is an abstraction to use data from local headquarters of JavaScript objects - or web services - and remote data retrieved with JSON, JSONP, OData or XML, as shown in the example in Figure 1.

Figure 1. DataSource with product list

Drag and Drop: . Kendo UI has two separate widgets that when combined, allow drag and drop visual components in web applications: KendoDraggable and KendoDropTarget. The first lets you select and drag the components and creates the second area that stores, as shown in Figure 2.

Figure 2. Drag and Drop by dragging components around the screen

Effects: It is a comprehensive set of tools that have optimal performance for transition visuals. Each of the effects provided by this widget is designed with CSS, and perfectly adaptable to older browsers. Figure 3 shows the zoom effect applied to one of the characters to move the mouse around the image.

Figure 3. Effects – Zoom

Globalization: This widget allows the development of adaptive applications to different cultures that define information such as number formats, name days of the week, month, date, time, and other formats. See an example in Figure 4.

Figure 4. Adaptation and automatic formatting with Globalization

Model View View Model (MVVM): This is a design pattern that aids in separating the model, data and presentation. Thus, the MVVM model becomes responsible for exposing data objects in such a way that these are easily used by the presentation (View). See an example in Figure 5 where, when you select an item, even if the data are presented in a layer, it is hidden.

Figure 5. Example of application of MVVM

Single-Page APP: It is a set of classes to simplify the construction of professional web applications (client side). So that it is really possible to understand the functionality of this component, we recommend visiting the example shown in Figure 6 and link in the Links section.

Figure 6. Page developed with Single-Page APP

Templates: It consists of simple JavaScripts to use, highest performance, in order to allow the creation of small pieces of HTML that can be automatically incorporated into data from JavaScript.

Validator: This widget provides users with an easy way to make form validation. It supports a variety of built-in rules and provides easy ways to customize them. A basic example can be seen in Figure 7.

Figure 7. Validation forms with Validator

These are the features offered by Web Framework Kendo UI Core. But we are not done here. There are many resources to exploit. We'll look at the web widgets resources.

Web Widgets

In addition tothe resources category presented previously, the following web applications can also be integrated and are available in the examples folder.

Autocomplete: This is an indispensable resource for the current developers. This due to extensive use of Google Suggestion. This control allows multiple entries of value, and suggestions for the auto process can come from a local array or a remote data source. Though simple, this widget ensures great convenience associated with quality and performance, as shown in the example in Figure 8.

Figure 8. AutoComplete feature

Buttons: Often, in a web application, we need some buttons with specific features and this widget provides an improved text input control and images on buttons, and allows switching the button modes as well as a rich API to enhance the experience of user. See an example in Figure 9.

Figure 9. Feature Button

Calendar, DatePicker and DateTimePicker: A great, simple and modern widget for calendars in HTML5. Allows you to select dates and intervals, offering a "multi month" view, and special models of days. It's simple to customize and does not affect the performance of your web applications, as shown in Figure 10. The DataPicker and DateTimePicker features work similarly.

Figure 10. Resource Calendar

Color-Picker: Allows the user to select a color from acolor palette.. With this, you can customize your applications, leaving them in ways that works best for you.

ComboBox and DropDownList: Allows selection of default values or even inserting new ones. This is a richer version of HTML ComboBox, providing native support for local and remote data, and allows you to configure the list of behavior. A good example can be seen in Figure 11.

Figure 11. Resource ComboBox

ListView: to use it, the developer inherits the benefits of MVVM, customized models, RTL support, Globalization and navigation features, as shown in Figure 12.

Figura 12. Resource ListView

MaskedTextBox: Whether your web application has a text box for credit cards, phone number with area code, or any other specific type of input, this widget will help you define and restrict the entry of data in fields in your form. Figure 13 provides a good example.

Figure 13. Resource MaskTextBox

Menu: This is a flexible HTML5 widget and easy to customize, because it can create professional, interactive menus, thus giving your application a modern look and easy navigation. An example of the various features provided by that widget can be seen in Figure 14.

Figure 14. Menu Feature

MultiSelect: This feature provides an easy way to provide users with their applications the ability to select multiple entries for a particular operation. Using this widget, you can enable multiselect with just one line of code, and the amounts collected from a JavaScript array or JavaScript object coming from the Kendo UI DataSource.

Notification: Allows communication between your application and its users, easily adding notifications that are not blocked by the browser. With this feature you can choose between several types of notifications, including allowing them to be stacked, as shown in the example in Figure 15.

Figure 15. Notification Feature

Panel Bar: Allows you to create a professional and flexible navigation system with minimal coding. This widget is ideal for presenting information in a limited amount of space, as shown in Figure 16.

Figure 16. Resource Panel Bar

Slider: Allow your user to select a value within a predefined range. This is a fully customizable control in regards to appearance, as well as many other supports and possible configurations. Note an example in Figure 17, where we have the possibility of developing a web application for building automation.

Figure 17. Feature Slider

Sortable: Allows the end user to classify lists by dragging and dropping. Even allows the creation of interactive panels on the drag and drop style. Figure 18 shows a simple example of this feature.

Figure 18. Resource Sortable

Splitter: Allows you to resize a simple form for separate content into web applications, or you can create two or more resizable panels, which state is automatically persisted by the server. A good example can be seen in Figure 19.

Figure 19. Resource Splitter

TabStrip: This feature allows you to organize the contents of a website efficiently. With it you can have full control over the appearance of the tabs, their behavior and orientation. Even allows end users to add or remove new tabs, all this with just a few lines of JavaScript. See an example in Figure 20.

Figure 20. Resource TabStrip

Toolbar: Imagine , when developing your web application, you can rely on a professional taskbar? With this widget this is possible and the component itself is in charge of carrying out the visibility of controls according to the width of your application window. Note the example in Figure 21.

Figure 21. Toolbar feature.

ToolTip: It's a way of enriching projects because it dynamically displays content - the famous "little balloon" of information, or hint for the more accustomed to desktop development. See the example in Figure 22.

Figure 22. Feature ToolTip

Window: This widget allows you to create modal windows , which by default, can be moved, resized or closed. All content of this can be defined as a static HTML or dynamically loaded via AJAX. See an example in Figure 23.

Figure 23. Resource Window


This is indeed one of the best tools for web development available on the Internet. All available resources are really amazing and provide great support for the development of professional applications, even in its free version. With the Kendo UI Core any developer can help create professional web applications,.

When referring to application development, security and time are common concerns, and this framework is able to assist with that, because all their resources are opensource, which allows analysis and adaptation, increasing safety and the fact that many of their resourcesare widely used. The time required to develop applications with pleasant and professional appearance is reduced considerably.


jQuery v1.9.1: http://www.jquery.com/

Kendo UI zip Core: http://www.telerik.com/kendo-ui/open-source-core

Gulp: http://gulpjs.com/

Example Single-Page APP: http://demos.telerik.com/kendo-ui/websushi/

Web developer and passioned for web design, SEO and front end technologies.

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login