Kendo UI Protips

Urban Dictionary contains several definitions for Protip:

1. Obvious advice sarcastically presented as sage wisdom.

2. To offer advice or suggestion to resolve a problem. Often used in context of emphasizing common sense, a very strong opinion, or to belittle/mock a person’s point of view.

3. A tip intended to convert a novice to an expert.

source: Urban Dictionary

There a couple of interesting things here. Most notably the fact that I just cited Urban Dictionary as a source of valid and accurate information. Secondly that protips can come in several forms. I do like the self deprecating protip:

Protip: blue highlighters are not bubblegum flavored.

source: Protips Tumblog

But my favorite Urban Dictionary definition of Protip is number 6.

An idiotic synonym for “tip”, primarily used my condescending morons who erroneously believe they are dispensing expert advice. It’s a stupid Internet meme that will not die.

In the interest of keeping the meme going, lets do this!

My Definition

I like to think of the Protip as a “Did You Know” slice of information when it comes to developers and programming. Kind of like tips and tricks that make your life much easier, but aren’t necessarily widely discussed or well known. For instance, everyone knows that you can enter the settings on your Mac by clicking on the “Settings” icon. But, Protip: You can open Settings by holding “option” while adjusting a setting from your keyboard (like brightness or volume). See! Isn’t that great! That one was for free - you’re welcome.

I wanted to share a few Kendo UI framework and widget Protips with you today. These are things that should make developing with Kendo UI both easier and more fun. All of these things are documented, but some are specific functions of jQuery or don’t really jump out at you when you look at the docs or go through the demos. So without further ado, I give you these Kendo UI Protips.

Proptip: Create A Kendo Window From Thin Air

Have you ever been developing an HTML5 application and wanted to open a modal window, so you add an empty div with an ID that you can use to create the window? That’s kind of annoying because then you have this empty div just kind of hanging out in your app all out of place and awkward. You actually don’t need to do that. You can create a div on the fly, create the window, set its content, center it and open it all in one shot. Have a look at the example below.

This is really part of the jQuery magic. The div is created by jQuery and then you can turn it into a Kendo Window. Once you get the reference to the window off the data(“kendoWindow”), you can perform any valid method on the window and chain those methods together. Chaining is great because it saves you key strokes, and the word “chaining” sounds really cool when you tell people that you just did it.

        Hey bro, FYI: I did that with chaining. It’s just how I roll.

See what I mean? And speaking of chaining…

Protip: Chain Animations On Widgets For Maximum Awesomeness

I actually saw this done the first time by @latenightcoder, and I was blown away. Widgets that have animations exposed can take chains of animations so they can do things like slide in and fade in at the same time. This makes for some really interesting effects. For example, the default animation for the Kendo Window is to fade in and zoom in. We can change that so it slides in from the left and out in the same direction.

That’s pretty amazing. You can try a combination of the following…

1. fadeIn fadeOut

2. slideIn:(up, down, left, right): Slides the content in the direction from off the screen.

3. slide:(up, down, left, right): Slides the content in the direction from a slight offset of the content’s final position.

4. expand:(vertical, horizontal): Expands the window from the top or side.

You can play around with more Kendo UI Window animations here.

It’s important to note that in both of the above Kendo Window examples, I am removing the window from the DOM when it is deactivated by calling this.element.closest(“.k-widget”).remove() which destroys the widget. That brings us to our next Protip which comes to you via @alex_gyshoev.

Proptip: Use this.element To Get The DOM Element You Created Your Widget On

In the above example, this.element will return the div that we created on the fly for our Kendo UI Window wrapped as a jQuery object. This works inside any of the events on the widget where this is the context of the widget itself. This means that you can immediately perform any jQuery function on this.element without having to re-wrap it.

// create a dropdown list on the div element with id "dropdownlist"
$("#dropdownlist").kendoDropDownList({
    change: function() {
        // this.element is the div as a jQuery object
        console.log(this.element);
    }
});

Protip: Use declarative initialization even if you aren’t using MVVM

MVVM isn’t for everyone - and that’s OK. It’s not a pattern that I find myself using very frequently. One of the things that is more prevalent in the MVVM pattern that you can use without MVVM is declarative initialization. This is something that I’ve blogged on before. The idea here is to use HTML5 data attributes to configure your widgets instead of having to manually create them all with the standard jQuery initialization. For instance, say you have 4 sliders on a page, all with a different configuration. You might do something like this…

That works, but it’s a lot of redundant JavaScript. Having to new up a widget every time you need one can be a drag after a while and really bloat your code. Kendo UI allows you to specify widgets and their configuration right in the HTML using HTML5 Data Attributes. Calling kendo.bind on the container that contains your widgets will initialize your UI. That means you could refactor the slider overload example to look like this.

That’s so much nicer! And you can declare any configuration attribute this way. Using declarative initialization should dramatically reduce the amount of JavaScript that you have to write so that your code stays lean and clean.

Protip: Don’t Use The Kitchen Sink

When you download Kendo UI, you might be tempted to drop kendo.all.min.js in your project and rock on. This works, but you most certainly don’t need the entire framework for your application. You might only need 25% of it at the most for any given app. That means that the other 75% is just bloat. Don’t send down unnecessary bits for your users. Make sure that you visit the download builder and select just the widgets / framework components that you need. Don’t worry, the download builder will resolve dependencies and make sure you get all of the correct files completely minified. This is just good practice and conserves bandwidth that may be abundant now, but as your app grows, will become much more scarce.

Note that the download builder is only available for purchased copies of Kendo UI. The trial and open source versions do not include access to the download builder.

Proptip: Use Functions In DataSource Transport Configuration

Ever needed to change the URL of the read on your DataSource transport all willy nilly? RESTful services generally require you to constantly alter your URL depending on the ID of the model object you are working with. The Kendo UI DataSource doesn’t have a method exposed for you to change this at runtime, so how do you do it? Very simply, you set the url in the transport equal to a function which will be evaluated every time the transport is executed. For instance, you might set a variable value and then reference that value when you set the URL.

        
var id = 1 // Nancy Davolio no doubt!
var ds = new kendo.data.DataSource({
    transport: {
        read: {
            url: function() {
                return: "Customers.json/" + id
            }
        }
    }
});

Now when you change the value of the id variable, the URL for the read changes. That’s very convenient. Here’s a quick example showing how to change the url dynamically with a function and a bound view model variable.

Your Turn

Got a proptip you would like to share? Leave it here in the comments. I see people do amazing things with Kendo UI all the time that I didn’t know were possible. If these proptips are new to you, download Kendo UI and give them a try. Who knows - you may even discover some of your own in the process.