Debugging those pesky Kendo UI MVVM bindings

If you have used the Kendo UI MVVM bindings much, then at some point you have probably found yourself staring at a JavaScript error and wondering why your element isn’t binding correctly. This is always a frustrating place to be, and you are usually left just scratching your head, wondering what the element is even bound to, or if it isn’t finding the correct property.

Fortunately, there is a sneaky way to find out what JavaScript object an element is bound to!

Disclaimer: What I delve into here is really internal to Kendo UI, and not officially documented or supported. That also means that it may change in future versions of Kendo UI. This was tested against version 2014.1

The basics…

First, let’s find the element that you are having issues with. For this example, I am going to use the actual Kendo UI MVVM Demo page. Let’s take a look at the first text box element on that page. The HTML is:

<input id="fname" data-bind="value: firstName">

kendo-debug-mvvm-1

You can tell by the data-bind="..." attribute on the element that this element should be MVVM bound.

Now you need to get that HTML element on your JavaScript console. If you are using Chrome (and why wouldn’t you be?) there is a handy shortcut to do this… just select the element on the Elements tab, then in the console, the variable $0 is that selected element! Note that the “$” here has nothing to do with jQuery.

kendo-debug-mvvm-2

If you aren’t using Chrome, then you could use a regular DOM or jQuery selector to get the element. You could also use the devtools to add an id="select-me" attribute to the element you want, then just use document.getElementById("select-me") to get the element on the console.

Once you have your element, you can get the kendoBindingTarget off of it. This is where Kendo UI stores data about the binding that is attached to the element.

$0.kendoBindingTarget

Which returns an object of the form:

{
    options: ,
    source: , // the JavaScript object that we are bound to.
    target: , // the HTML element, same as the one you already selected to get this far.
    toDestroy: []
}

The important bit of information here is the kendoBindingTarget.source which is the object originally bound to. We can see on the element that we wanted to bind the value to “firstName”, so we can see what that value is by calling:

$0.kendoBindingTarget.source.firstName; // returns "John"

There you go! You are now on your way to debugging your MVVM bindings!

Getting more advanced…

There is a little more to it that this, because Kendo will also move up the parent chain of observable objects looking for matches to bound properties, but you can also walk that chain by calling .parent() on an ObservableObject or ObservableArray.

You may have noticed that the kendoBindingTarget also had a toDestroy array on it. This is to help Kendo UI do some binding cleanup later, but one of the things that it stores in that array is the actual binding object, so you can use that to your advantage as well. Back in the MVVM Demo page that we are using, take a look at:

$0.kendoBindingTarget.toDestroy[1];

This returns an object that has these 3 properties:

{
    parents: [...],
    path: "firstName",
    source: {}
}

This is the “value” binder, as was specified by the HTML element’s property: data-bind="value: firstName". The source is again the original object being bound to, but this really isn’t as important. What is important is the parents array. These are the actual objects that Kendo UI will check (in order that they are in the array) for a property that matches the name in path. Once found, it will use that value for the binding. The object in the source property of the binder is already in that parents array, as would its parents, if it had any. In other words, this returns true:

var kendoValueBinder = $0.kendoBindingTarget.toDestroy[1];
kendoValueBinder.source === kendoValueBinder.parents[0];
// returns true

So what does this all mean? Well, you can make your own code to scan the objects in the parents array to resolve your binding!

function getKendoBindingValue(kendoBinder) {
    var numParents = kendoBinder.parents.length;
    var i = 0;

    for(i = 0; i < numParents; i++) {
        if(kendoBinder.path in kendoBinder.parents[i]) {
            return kendoBinder.parents[i][kendoBinder.path];
        }
    }

    return undefined; // not found.
}

This is roughly equivalent to what Kendo UI does internally (except that if the property is a function, it will execute the function and return the result).

Hopefully this helps clear up MVVM bindings, how they work, and helps you debug those situations where your binders just won’t play nice!

Advertisements
Tagged with: , ,
Posted in JavaScript, KendoUI, Programming
4 comments on “Debugging those pesky Kendo UI MVVM bindings
  1. Guillermo Londono says:

    Great post… thanks for sharing… If you are interested, I created a simple Chrome DevTool Extension to see the source of the inspected element which is crucial to detect binding problems.

  2. Joe Meeks says:

    Great find! kendoBindingTarget was the missing piece to so many troublesome MVVM binding scenarios in the past. Now I can access the observable from change and other bound events. Here’s an example implementation:

    http://www.telerik.com/forums/looking-for-a-way-to-strip-the-mask-before-posting#ZJOpQERrDEKiJemUVuhovQ

    Thanks a bunch, Jeff!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

CodingWithSpike is Jeff Valore. A professional software engineer, focused on JavaScript, Web Development, C# and the Microsoft stack. Jeff is currently a Software Engineer at Virtual Hold Technologies.


I am also a Pluralsight author. Check out my courses!

%d bloggers like this: