Apps

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:

<script>

$(document).ready(function() {

$("#upDownTest").kendoNumericTextBox();

});

</script>

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.]

J.Ja

About

Justin James is the Lead Architect for Conigent.

9 comments
toddanglin
toddanglin

To clarify a point in the article, Kendo UI [b]does[/b] use jQuery. In fact, jQuery is the only external dependency in Kendo UI. Everything else is built internally and delivered with Kendo UI downloads. The confusion is likely in that we [b]do not[/b] use jQueryUI, a distinctly separate project from the "core" jQuery library that delivers basic UI widgets. While jQueryUI is good for basic web UI needs, Kendo UI goes much further to provide all of the essential UI widgets and framework components needed for complete app development. Hope that helps clarify. Sorry for the confusion. We're working hard to make sure the docs rise to the level of the engineering in Kendo UI.

apotheon
apotheon

Unfortunately, the open source license sucks, so I won't be using it for my open source projects -- which also means I won't be using it for commercial projects, because I don't want to use two separate toolkits for two different licensing circumstances.

chris.smith
chris.smith

My company offers a BI product that has charting/dashboarding built into it and right now its all Flash driven. Last weekend we made the decision to dump flash and use the Kendo DataViz UI controls and so far everything has been great. In about 2 or 3 days I have gotten most of the dashboard functionality converted over to Kendo with a mix of C# .NET 4 and Ajax. I am new to HTML5 and have only used JQuery a handful of times so I am pretty happy so far with how easy this framework has made it. Looking forward to getting into the other controls that are included in the suite. I would agree though the documentation could be more through, especially for a newbie like myself. Alot of experimentation with the controls was needed to get things working though.

Justin James
Justin James

I just wanted to let folks know, the issue with the documentation has now been corrected, and we'll be updating our article too. Great work from the Kendo UI team on being responsive to this issue. J.Ja

BALTHOR
BALTHOR

I tried this one "server=test;database=northwind;user id=test;password=test" the other day on my way to Tech Republic.It didn't work!I tried a SimpleLambdas,an ObjectDumper and several SimpleLinqToXml's.Nuthin.I went on to try several XQuery's two OLCOM's and a COM Interop Part II.That's where I screwed up and had to start over.(I started to frenzy here) A PInvoke to a Simple Variance (This is really hard to do) and an Anonymous Delegates for good measure.I had them begging for mercy.Can anybody at TR help me?

toddanglin
toddanglin

@Apotheon- I second Justin is apologizing that the licensing doesn't work for you. We tried very hard to create a licensing scheme that could simultaneously support open source and commercial projects. We recognize it's hard (impossible?) to please everyone, but we'll keep working as hard as we can to build the best tools for HTML5/JS development. As for the Kendo UI OSS licensing, we are using GPLv3 instead of something like MIT or BSD because it is our intent to support "truly open" (copy-left) projects with the OSS license. For other projects, we suggest the commercial license. If you have unique circumstances, we may be able to help. Feel free to email me if you want to discuss: todd.anglin@kendoui.com.

Justin James
Justin James

I didn't look at their open source license since it isn't applicable to any projects I am working on. Your reasoning makes sense, but it stinks that it is worked out like that. Maybe you can email them about it? They were *very* responsive to me when I notified them about the documentation errors I found. J.Ja

apotheon
apotheon

I appreciate the time you took to respond to my concerns about licensing here, Todd, but I fear we appear to fundamentally disagree about the characteristics of openness. One cannot use copyleft code within copyfree projects, because copyleft licenses demand that code connected to them (especially strongly copyleft licenses like GPLv3) are also distributed under their terms. One cannot even use copyleft code with copyleft projects a lot of the time, because two different copyleft licenses are by definition incompatible with each other, barring explicit exceptions. This is a horribly un-open state of affairs for a license, from my perspective. You're welcome, by law, to use whatever license you like -- but you also shut a lot of open source projects out of using the software when you choose something as restrictive as GPLv3. It's a consequence you'll simply have to accept. "For other projects, we suggest the commercial license." That's not going to work for copyfree projects (e.g. those using the MIT/X11 and BSD licenses to which you refer). It's not going to work for CDDL projects, GPLv2 projects, or other projects using copyleft licenses with which GPLv3 is not compatible. "If you have unique circumstances, we may be able to help." My circumstances are far from unique but, honestly, I don't know that it's worth either my time or yours to discuss it much. I rather suspect you will not want to allow usage in copyfree licensed projects, considering it would require license changes that will then apply to basically everyone, and the fact the licensing creates a situation where it is not worth my while to even seriously evaluate the Kendo UI tools means that even if we did work something out the end result might be that I would decide I prefer other jQuery based tools anyway. I do appreciate the offer, though. On second thought, I'll email you just in case you want to discuss licensing with me despite the above statements to the effect that I doubt our interests will align. Far be it from me to refuse the offer of reasonable discussion.

toddanglin
toddanglin

@Apotheon- I think your perspective is fair. Kendo UI is not "copyfree." Rather, we offer Kendo UI under the GPLv3 in the spirit of "pragmatic idealism" (http://www.gnu.org/philosophy/pragmatic.html). That is, we want to make Kendo UI freely available to others that are trying to produce and promote open software in the principles of the FSF (http://www.gnu.org/philosophy/why-copyleft.html). We want to make a non-commercial, free license available as a gesture of support to other developers promoting free, open software. Weaker, copyfree/non-copyleft licenses, are fine, but they are not compatible with our goals for the Kendo UI OSS license. I hope this makes sense. I'm very sorry Kendo UI doesn't fit your project licensing! Hopefully that doesn't block you from checking-out what I think is an awesome product!