Getting started with Kendo UI HTML5 controls

Justin James likes the Kendo UI HTML5 controls and says you don't need to be an expert at jQuery to use them.

Telerik has been making various UI controls for a very long time, and they recently released a new set of HTML5 controls called Kendo UI. Since I have had good experiences with Telerik products in the past (disclosure: I have received free copies of JustCode and JustTrace directly from Telerik as prize giveaways in contests and for attending Webinars), I decided to give Kendo UI a try.

The first thing I noticed about Kendo UI is that it leverages the increasingly popular jQuery framework. I was a bit put off by this because it's really easy to get lost in the jQuery ecosystem. Every time I look at jQuery's website, I end up walking away a bit more confused than I was when I got there, and I do not have enough need for direct jQuery use to justify reading an entire book about it. One day I may need to touch jQuery directly, and that day will probably arrive with a full-blown switch to Ruby on Rails or perhaps ASP.NET MVC, but for now, Agile Platform does the jQuery for me.

You do not need to be an expert at jQuery to use Kendo UI. The relationship is unclear; the Kendo UI FAQ says that it doesn't use jQuery, but to use it you clearly need to include jQuery and use jQuery-style code. To interact with it, you use jQuery-style syntax, but that is easy enough to get a handle on for the purposes of Kendo UI. One of the big advantages of Kendo UI is that everything is pre-packaged, pre-tested, and ready to go. That's a big step up from the world of jQuery plugins, which has so much of the perpetual beta feel whenever I look at it. While Kendo UI does come with a price tag ($399/developer), I feel that it can pay for itself quickly if you do not lose a day or two trying to select the right jQuery plugins and figuring out how to work with them.

The demos on the Kendo UI site serve as the documentation. All the same, I want to show the usage of the NumericTextBox control, since this is functionality that I've always been annoyed wasn't in HTML to begin with. To start, you put the following into the <head> portion of the page:

<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.core.min.js"></script>

<script src="js/kendo.numerictextbox.min.js"></script>

You will want to make sure that the URLs to those items are correct. Next, you put an <input> onto your page, and set the NumericTextBox-specific attributes to the values you want:

<input id="upDownTest" type="number" value="5" min="1" max="10" step="0.5" />

You need to use some jQuery-style code to tie the HTML tag to the Kendo UI system:


$(document).ready(function() {




This should get placed within the <body> tag, at the very end.

Unfortunately, I had a really bad experience with these tools. The documentation is flat out incorrect with regards to what tags to put into <head>. The only way I could get this working was to take the sample code and start butchering it to cut it down to what I needed.

This code did just lose its beta label in the last week or two, but it is very difficult to swallow spending $399 on controls that, out of the box, do not work due to flagrantly incorrect documentation. If I have to work this hard to get something this simple working, it leads me with grave doubts about the rest of the documentation and wonder how much of it is outdated or just wrong. Hopefully, Telerik can get this package completed and properly documented, because I like the controls.

[Update: Since the writing of this article, Telerik has corrected the issues with the documentation.]



Justin James is the Lead Architect for Conigent.

Editor's Picks