Lately I have been evaluating a few JavaScript based UI libraries for both my projects at work and to use for a new version of the bike climbs site called 39x27.com: it was quite nice to see that almost all component vendors are now embracing, some more than others, JavaScript together with the more traditional Web Controls for ASP.NET Web Forms.

In this post I’m going to briefly cover the reasons why I ended up choosing Wijmo, and then I’m giving a quick introduction on the set of widgets available.

All the buzz lately is about KendoUI, a jQuery-based UI widget library developed by Telerik, so it was the first library I looked at: it’s based on jQuery, and is available also with a OSS license (GPLv3). It has lots of widgets, both for web UI element and for drawing charts and they are developing also some mobile UI controls. And it’s use feels natural, looks like jQueryUI: you create a HTML element, you select it via jQuery and then enhance it via a KendoUI specific JavaScript function.

What I didn’t like is that they reinvented the wheel: one line above I wrote “looks like jQueryUI” because it is not built on jQueryUI; Telerik wrote its own widget core library. This might be ok for people that are using other Telerik controls or are ok with vendor lock-in, but I didn’t like this approach that much: what if I need a widget that is not available? Either I write mine from scratch using the KendoUI core library, or I look on the internet, and include also jQueryUI in the mix, since most likely the OSS widget I find is built on it.

I looked for something else, and my second option was Infragistics jQuery controls: apart from having less controls, costing more money and not having the double commercial/OSS license, it is also built on top of their own core widgeting framework. So, another no-go.

The great thing of being based on jQueryUI is that you can use all the jQueryUI themes, and if you need something not included in the library you can include any other jQueryUI widget without the risk incompatibilities between widgeting frameworks.

From the license stand point it is similar to KendoUI: it is available both with GPLv3 license and a commercial license. And a “light” version of Wijmo, including only the basic controls, is also available with a MIT/GPLv2 license, making it usable also in OSS projects that are not GPLv3.

I also wrote a features comparison table between the widgets you get with Wijmo Open, Wijmo Complete, KendoUI and with jQueryUI. (based on Wijmo v2 and Kendo UI as available in February 2012)

Getting started with Wijmo

Let’s now quickly see how it looks like developing with Wijmo.

Download the bits

Hit the Wijmo website, and download the JavaScript library: it comes bundled with samples for every widget, complete sample apps, normal and minified version of all the JavaScript files, and all the premium themes. This is the best way to start playing with Wijmo. If you want you can also use ComponentOne CDN and reference all JavaScript files from there.

Referencing the libraries

As said above, Wijmo is based on jQueryUI, which is based on jQuery, so in order to include Wijmo you have to reference all of them.

The easiest approach is using ComponentOne CDN, which provides a minified version of the JS libraries and their CSS.

Or, if you want to host the script files locally on your server you can also select the files you just need for your application: you can do that by checking the dependencies of each widget (for example the dependencies of the Rating control)

Adding a Rating control

Let’s see now how add a Wijmo widget to a page: I’ll use a rating control, but the process is the same also for most of the other widgets.

After having added the references, let’s add the HTML element we want to use for the widget: it this case, we can use either a list of radio button, a select, or just an empty div. Choosing a form element makes it easy to store the rating value directly, while if you choose an empty div you have store the value yourself. In this case I’m going to use a select list.

And you’ll have nice rating control with a reset button to clean the value and tooltips.

Fine-tuning the appearance of the widget

Probably you might want to customize the appearance of the rating widget, like removing the reset button, or maybe enabling multiple values per star, or changing the icons instead of using the stars. To do that just specify the properties when you call the wijrating method:

The editable grid

Let’s see now a more complicate widget: the editable/sortable/pageable grid.

The hook in HTML is simple: just add an empty table if you want to load the data from a JavaScript datasource, either local or remote via JSON, or a normal table with all the data already in tabular form.

<tableid="climbsTable"></table>

Then, as usual, via jQuery, you enhance the table by calling the wijgrid method. In this post I’m just going to show the basic features, how to pass local data, and how to enable sorting and some other basic formatting options. In a future article I’ll show how to use it in a ASP.NET MVC application with Web API. This code is taken from a prototype of the new version of a bike climbing web site I’m building with my friend Davide Vosti, called 39x27.com.

The first property is called data and is the one that defines how the grid is populated: it could be an array of array, an array of objects (like I did in the sample above) or wijmo datasource if you wanted to get the data from a server.

In the sample I then enabled sorting, and later provided an array of columns: the first 3 are empty because I want to use the default values (header is the property name of the JSON object provided and the data type is string), but in the next 3 I specified the data type and the format of the string: the data formats us the same format of jQuery Globalize, so p1 means percentage with 1 decimal while n0 means generic number with no decimals.

In conclusion

In a few words, what I liked the most about Wijmo is its philosophy of embracing what is already available (jQueryUI) and most likely already well know by developers rather than reinventing the wheel and bringing yet another library in the mix like the other component vendors are doing.

Disclosure of Material Connection: I received one or more of the products or services mentioned above for free in the hope that I would mention it on my blog. Regardless, I only recommend products or services I use personally and believe my readers will enjoy. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”

@Atanas: I'll update the chart, and probably write in the post that this review is based on wijmo v2 and KendoUI as it was in February 2012. I don't want to keep updating the post forever :)

As for mobile, it is another package, that will be sold separately. Actually I should have not mentioned the charts either because they are in another package that is now sold together but will become a separate license to buy in the future.

Anyway, if you carefully read through the post, the decision to not to use KendoUI was made because it has reinvented what was already available and good: jQuery UI.

@Shashi: I think that the licenses allow usage in educational environment.. actually I think GPLv3 allows usage of the components even in commercial environment as long as they are not "distributed" or published (ie internal tools). We bought the license just to be on the safe side, but based on what I read we could also have used them without paying.

We are happily using the pro version of Wijmo for one of our projects (dashboard app). A client requested a 3D version for some widgets and we are looking for a Wijmo / Jquery UI experienced developer who can help us with this. We are based in Sydney AU, you can be based anywhere.