× 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

Introduction to Kendo UI Web Applications

We know in this article the main features of this development framework that uses JavaScript, AJAX and HTML 5.

All 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 constantly evolving to increasingly interactive, robust, complex and interesting applications that can meet consumers and companies search tools that make your fastest, professional and easy process. Many factors are involved in the development of quality web applications, and its ability to adapt to different devices (responsiveness), one of the main.

This and other important activities in the creation of the app can be performed with a high degree of ease when we use the right tools, such as our study of this article object, Kendo UI.

It is a framework that brings together a number of user-friendly features and are presented below. But before we know it more.

Kendo UI

This is an interface framework with HTML5 user, which allows the construction of sites and interactive applications, and high performance. This has a library of over 70 widgets for graphical interfaces construction and manipulation, as well as an abundant concentration of devices for data visualization and source 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.

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 parts where each can be developed in one of them according to the needs of your project. Kendo Kendo UI is divided into Kendo UI Core, Complete and Professional. And we will know each 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 size 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 some that enable 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 PHP for UI; 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, and HtmlHelper extension methods that allow you to configure 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 through JSP; the UI to PHP: Are supplements 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 leaving for the installation of the framework we will 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 proper functioning if the jQuery version is lower than indicated.

In addition, we need to get the sources of the framework and that there are two ways: through the site's zip Teletrik.com your distributor, or through Gulp (links are in the links section). The latter means includes an option to build a Kendo UI distribution whose nucleus contains only what it deems necessary for the development of your application. However, the first option is strongly recommended for those who are starting now in development with him, it is that we use in this article.

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

  • /examples - This folder stores demo files. Despite being HTML's static, it is recommended that they be opened through a web server, this is due to 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 the folder styles/folder: styles/web/estyles/mobile/. However, many of these files are not available in the test 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 Kendo UI resources, some settings have to perform. 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 HTML HEAD tag of the web application. Also check that the Common CSS file is being recorded before the Theme CSS file, as the example in Listing 1.

Listing 1. Example UI Kendo configuration for web projects.

1.<!DOCTYPE html>
  2.        <html>
  3.        <head>
  4.           <title>Welcome to Kendo UI!</title>
  5.            <!-- Common Kendo UI CSS for web and dataviz widgets -->
  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 and dataviz widgets -->
  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

In this category are listed the componentes/features specific to the development of web applications. Examples of codes and how to integrate them into their applications can be found in the Kendo UI Core own in the examples folder. These are not posted here, only the most important.

DataSource: It plays a central role in virtually all web applications built with Kendo UI. It is an abstraction for use data from local arrays 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: Surely you ever needed or wanted to create web applications wherever possible drag menus and other components around the screen. Kendo UI has two distinct 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 wide range of tools that have optimized performance for transition visuals. Each of the effects provided by this widget is designed with CSS, and perfectly adaptable to older browsers. In Figure 3 is shown the zoom effect applied to one of the characters when mousing over 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 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 the data objects in such a way that these are easily used by the presentation (View). See an example in Figure 5 where, when selecting an item, even if the data are presented in a layer that was previously hidden.

Figure 5. Example of application of MVVM.

Single-Page APP: This is a set of classes to simplify the construction of professional web applications (client side). To be really possible to understand the functionality of this component, I 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, but high performance, in order to allow the creation of small pieces of HTML that can be automatically incorporated into data from JavaScripts.

These are the features offered by Web Framework Kendo UI Core, but not done here, there are many resources to exploit. We will see the following Web widgets resources.

Web widgets

As the resources of the category shown above, presented 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 autocomplete process may come from a local array or a remote data source. Although simple, this widget ensures great convenience associated with quality and performance, as the example in Figure 7.

Figure 7. Autocomplete feature.

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

Figure 8. Feature Button.

Calendar, DataPicker 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 9. The DataPicker and DateTimePicker features work similarly.

Figure 9. Calendar feature.

Color-Picker: Allows the user to navigate its applications for a color palette, selecting the one that best suits you. With this, you can customize your applications, leaving them in ways that best suit them.

There is still a number of other resources available that will not show in this article, but no doubt 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. The UI Core kendo any auxiliary developer can create professional web applications, so that these become detached and professional as well.

When we refer to application development, security and time are common concerns, and this framework is able to assist these two senses, because all their resources are opensource, which allows analysis and adaptation, increasing safety and the fact that large of their resources just be the most widely used frameworks of the moment. The time required to develop applications with pleasant and professional appearance is reduced considerably.


jQuery v1.9.1


Kendo UI Zip Core




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