The JavaScript Bat Belt

The Dark Knight

This weekend, I finally did what so many developers have already done several times in the past month. I saw the new Batman movie. I decided for this post, that I would do a complete character and plot breakdown while dissecting the moral and social implications of the movie. Then I laughed at that terrible idea.

I always loved Batman’s belt in these movies. I was maybe 10 when the first Batman movie came out with Michael Keaton and Jack Nicholson as the joker says, “Where does he get those wonderful toys?”.

I thought today we would look at some of the wonderful toys in Kendo UI that make it so much more than just a UI library. All of these items are in the documentation where you can have a more in-depth look if they peak your interest.

The kendo Namespace

The kendo namespace is a virtual wonderland of awesome balls. You can have a look at it right out of the Chrome Dev tools console.

That screenshot doesn’t even go all the way to the end. Much of this is already documented for you in the API Reference section of the new Kendo Docs site. The kendo namespace is actually the first page loaded in the API Reference section.

Let’s go through this section and have a deeper look at what’s available to you from Kendo UI Tool Belt.

bind

This one is pretty straightforward. It binds the specified portion of the document to a view model. It also initializes any widgets that have their data-role property set.

The reason why I even started with this one is that there is an important “tip” here that you might gloss over. In order to use this the Mobile UI widgets, you need to actually specify they namespace kendo.mobile.ui. However, it is much better to actually let the mobile application do the binding by specifying the view model in a data- tag. This is how you would use Kendo MVVM with the mobile widgets.

Class

This is one that I’ve written about before. While JavaScript does not contain traditional “Classes” as we know them in Object Oriented programming, you can create classes in JavaScript using functions. Kendo does this internally and wraps the Class for you to use yourself. You simply extend the base class. The init function is the constructor that is automatically called when a new object is created from the class.

stringify

I’ve written about the stringify method before too in more than one post. I use it all the time. This method will serialize JavaScript objects to JSON. This is particularly helpful in conjunction with the DataSource and the transport parameterMap function when you need to modify your parameters as they are sent to the server.

Most modern browsers support the JSON2 library which gives you a native stringify, but Kendo makes sure that it exists. If it does, it uses the native stringify. If it does not exist, it uses an implementation of stringify.

Coming right off of the previous Class example, you can see that we can add a simple stringify method to our class which in turn calls stringify on the class itself. What you get back is an object containing just the properties firstName and lastName. How convenient is that?

If you had a collection of people, stringify will return an array of those person objects for you.

Properties

The support namespace is a playground of interesting functionality.

support

Kendo can give you all kinds of information about what functionality is supported in the current environment. For instance, you can find out whether or not the browser is going to support CSS3 transitions and transforms. This important information to have since CSS3 is hardware accelerated and therefore much faster and smoother (especially on mobile).

Of course, Kendo UI takes care of falling back to supported animations if the CSS3 transforms are not there.

kendo.support.hasHW3D

In addition, all browsers are different. For instance, IE 10 has pointer events that correspond to stylus use. These are more accurate that touches and you can determine if they are available by calling kendo.support.pointers. It will return true if they are supported.

A Quick Note On Modernizr

One might be asking at this point, “Why not use Modernizr?”. This is a great question! Modernizr is the bees knees when it comes to knowing what your browser will support. In fact, I would highly recommend you use both Modernizr and Kendo UI together.

We don’t use Modernizr for our internal feature detection as it’s important to us to not have any dependencies other than the one we take on jQuery. This helps us iterate faster, and allows us to change the feature detection code to suit Kendo UI more closely. However, there are certain decisions that Kendo UI does not make for you - like whether or not you should use the built-in DateTime input type of the Kendo UI DateTimePicker. These are decisions that you should make yourself using Modernizr.

support.mobileOS

Kendo UI has a very powerful adaptive rendering framework which adapts the mobile look and feel to match the native UI of the device which is accessing the application. In order to do this, Kendo has to determine which device is being used. You can actually use this functionality yourself at any time with the kendo.support.mobileOS property.

Note that this only works for mobile devices. It won’t tell you if you are using Windows vs Mac vs Ubuntu vs Whatever else.

You can spoof the user agent in Chrome by opening the developers tools and then clicking on the little gear in the lower right-hand corner. In this example, I’m pretending to be an iPad.

Now call the mobileOS property:

kendo.support.mobileOS

This is SUPER handy for detecting a mobile OS vs a desktop OS. If you are running a desktop OS, it will simply return false. It’s a great tool if you need to determine if your user is accessing the application on a mobile device or not. Also, it’s part of the Kendo UI core so you don’t need to be using Kendo UI mobile to take advantage of this!

support.format

You have most likely noticed the formatting syntax used everywhere in Kendo UI. This is the {#c} type syntax. You can find complete documentation for the different formatting options in the kendo.format docs. You can format just about any string by running it through another handy Kendo utility method.

toString

The toString function returns a number or date in the specified format of the current culture. The default is en-US, but you can change the culture by calling kendo.culture.

Suppose you wanted to specify currency for the amount $12.01. Your number in JavaScript is 12.01. To convert that to the specified currency and date format, run it through kendo.toString.

var amount = 12.01
kendo.toString(amount, "c");

Now suppose you wanted to drop those two decimals. Use the custom number formatting. Just provide a zero or digit placeholder and then hashes to denote how many places you want to show. In the above example, we could get just $12 by providing 1 digit placeholder preceded by a $ sign.

var amount = 12.01
kendo.toString(amount, "$#");

If you wanted to grab 1 decimal place behind the 12, you would specify a decimal spot and a zero placeholder.

var amount = 12.01
kendo.toString(amount, "$#.0");

Ready to get that currency back into number format? Reach into your tool belt and grab…

parseFloat

This method parses a formatted string as a floating point number.

var amount = 12.01
var dollars = kendo.toString(amount, "$#.0");
var backToAmount = kendo.parseFloat(dollars);

So Much More

I have barely even scratched the surface of what you have at your disposal in terms of Kendo utlities, helpers and abstractions. Kendo UI is so much more than a UI library. I highly encourage you to checkout the documentation on the kendo namespace and see how Kendo not only gives you a beautiful UI, but additionally provides you with the “wonderful toys” that you need as a JavaScript developer without having to write any stub functions or do wierd parsing in JavaScript.

Download Kendo UI today and see how it is much more than just a UI framework. If you are going to take on the “Bane” of web and mobile development, you must be armed with your Kendo tool belt.