Introduction to Kendo UI

Kendo UI is a Javascript library for developing client-side rich web applications with various dynamic jQuery-based user interfaces.

KendoUI is a package of libraries ready to be used by developers in dynamic web pages, entirely made with Javascript and based on jQuery. Despite using jQuery as the basis for development, we could call it a Javascript framework, since it offers various basic features, such as drag and drop or a Javascript template system, but its forte is user interfaces ready to be incorporated into web projects.

In case this comparison is of any use to us, Kendo UI is something similar to what it offers us, with the difference that both libraries implement some different components (widgets). Actually most of what we can do in jQueryUI we can also do with Kendo UI, but this latest library goes a bit further, allowing for some slightly newer user interfaces.

Kendo UI’s variety of user interface components include dynamic menus, graphs, panels, data grids, trees, windows, file upload systems, etc. There are 13 different types of highly customizable widgets with really advanced features.

Of course, compatibility has been perfectly taken care of in all the most common browsers, just as we are used to with these types of products. In this way, both the functionalities of the framework and the different widgets run perfectly in Internet Explorer (version 7 onwards), Safari, Chrome or Firefox, both in the versions created for personal computers and mobile devices.

Finally we want to highlight that Kendo UI, at the time of writing these lines, is published in beta phase. As explained on its website, it is planned to offer it under two different licenses, one commercial and paid, with support and other advantages, and one free and open source. During the beta phase, the commercial license is not available.

We can find Kendo UI at the following address:

Getting started with Kendo UI

In this .com article we are going to tell you what you have to do if you want to take advantage of the ready-to-use features of Kendo UI, as a recipe.

1) Download Kendo UI

We can go to the to download the newest version of the libraries. We will obtain a compressed package that includes various folders.

• examples: Examples of use of each of the framework’s features and dynamic widgets.
• js: Minified Javascript files, which would be ideal for use in production pages.
• source: Javascript and CSS files with unminified code and comments, ideal for developing pages.
• styles: Minimized CSS files, with 3 different versions that would give different appearance to the user interface components.

Once downloaded, we should copy at least the “js” and “styles” folders into our project.

2) Include the Javascript and CSS

The second step would be to include in the header of the page links with the style sheets and Javascript files that would be necessary to have in order to use the framework.

Regarding CSS style sheets, Kendo UI comes with three different distributions, from which we can choose the one that best matches our website. At this point it loses a bit compared to jQuery UI, since these libraries include dozens of themes and very varied ones. Kendo UI, at least at the moment, has two themes for use with light backgrounds (one orange and one blue) and one theme for use with dark backgrounds.

Note: When linking to the style sheets we have two different files. One for the common styles “kendo.common.min.css” and another for the particular styles of the theme that we have chosen (one of the three possible “kendo.kendo.min.css”, “kendo.blueopal.min.css ” or “kendo.black.min.css”).

As for the Javascript files to include, there are several possibilities, depending on the functionalities or components that we are going to use in our project. In the documentation pages the file dependencies are specified, which we must have when we use some and other things of everything offered by the libraries. However, to make life easier and for now, we are going to include a single file “kendo.all.min.js”, with all the Kendo UI code. It’s a bit of a large file, but it will save us worrying about existing dependencies and make the entire framework available, which will be useful at least during the development of the project.

Now, as we said, Kendo UI is based on jQuery, so we will also have to include the jQuery file, just before including the libraries of this framework. We would have a code like this.

As you can see, we are including jQuery (currently at version 1.6.2) from the GoogleAPIs CDN and the “kendo.all.min.js” file that has all the Kendo UI code minified.

3) Use Kendo UI from our pages

Now we only have to start using Kendo UI on our page, since we have everything we need to start. Of course, at this moment we would need to consult the documentation to find out how to use each of the components that the framework offers us. To do this, in the “demos” section we can find many examples and all the necessary details to implement them on our website.

Example of using the Kendo UI Menu component

As a demonstration of the ease with which we can create our pages based on the Kendo UI interfaces, we are going to explain below how to implement the “Menu” widget, which is used to create dynamic drop-down menus with Javascript, which also allow various levels of nesting of menu options.

To create our menu we must start by creating the necessary HTML structure to define the options it will have.

• First choice
• Second option

  • Nested Option 1

    • We can nest n levels

  • Another nested option

• Third option

Then we need to call the component using Javascript, just like we’re used to doing with jQuery plugins.

$(“#menu”).kendoMenu()

That is all!! As we could, the menu has been perfectly created and is animated by default with various effects.

But also, when creating the menu we can provide different options to customize it. Each type of component supports its particular options, which can be found explained in the documentation. We will see an example of customization by options, to make the menu present its various options vertically instead of horizontally.

$(“#menu”).kendoMenu({
orientation: “portrait”
})

We can do this menu.

As if that were not enough, each user interface component offered in Kendo UI has a series of methods and events, aimed at further improving dynamic behaviors. For example, in a menu with these characteristics we can do things like add options, remove them, enable or disable them, close a branch or open it, all through methods that we can call on the “kendoMenu” object. We can also define Javascript instructions to be executed in response to events specifically created within the component, such as opening a menu branch, closing it, or selecting an item.

To offer a

We achieve this through two simple steps. First, when creating the menu, we need to save ourselves a variable with a reference to the “kendoMenu” object.

var menu = $(“#menu”).kendoMenu().data(“kendoMenu”);

That reference is stored in the “menu” variable, but also, notice that we call the jQuery data() method inside the kendoMenu object, passing the value “kendoMenu” as a parameter. This offers us a reference to said object in which all the functionalities defined by the Kendo UI library widget will be available.

Once we have that reference, creating new items is as simple as calling the insertAfter() method, which inserts items into the menu. That method takes two parameters. The first is a JSON with the texts of the elements to be inserted indicated with the “text” property (in this case there is only one, but it could be an array in JSON notation). The second parameter is the jQuery object of the element behind where we want to insert the option to the menu.

menu.insertAfter({
text: “Social Networks”
}, $(“#li3”))

Note: In this case, the jQuery object with the element that serves as a reference, to insert the new option in the menu behind it, we select it with the “#li3″ selector, then it is understood that somewhere in the list we have placed an LI element with id=”li3”. It is behind that element that that menu option will be inserted. With more advanced jQuery selectors we could also access list elements like menu.element.children(“li:last”).

conclusion

Kendo UI libraries are an excellent tool for developing HTML5 applications. They come with various useful features such as “Drag & Drop”, but above all the various components for creating rich user interfaces are interesting.

We have seen the KendoMenu component, which allows us to create a dynamic Menu, which is undoubtedly one of the most typical features in user interfaces. In a few minutes we have been able to verify how easy it is to implement it thanks to Kendo UI and customize it according to our interests.

We will continue studying KendoUI for the creation of new articles for .com, since the framework has pleasantly surprised us. In the following article we will explain to you.