Integrating Kendo UI drop downs with Knockout JS

Kendo UI drop downs look great.  Here is a Kendo UI drop down with default styling in closed and open view:

It is built with this HTML:

<input id="kendoDropDown" type="text" />

and this JavaScript:

// Init the drop down
$("#kendoDropDown").kendoDropDownList({
    dataValueField: "id",
    dataTextField: "name",
    dataSource: [
        { id: "1", name: "apple" }, 
        { id: "2", name: "orange" }, 
        { id: "3", name: "banana" }
    ]
});

The snag

Unfortunately, this handsome drop down doesn't integrate smoothly with Knockout JS when it comes to data binding.

We should be able to update our HTML to use a Knockout binding:

<p>
    <label for="kendoDropDown">Kendo UI Drop Down</label>
    <input id="kendoDropDown" type="text" data-bind="value: fruitId"
    />
</p>

Then add a view model and apply the Knockout binding:

// Define and init the Knockout view model
var ViewModel = function () {
        var self = this;
        self.fruitId = ko.observable();
    },
    vm = new ViewModel();   

// Set the initial fruit value
vm.fruitId("2"); // orange

// Wire up KO binding
ko.applyBindings(vm);

We should see a drop down loaded with the view model's initial value of "2" (orange), but the first value in the list ("1" apple) is selected instead.  What's going on?

More investigation

I thought maybe I had a Knockout bug in my code, so I played around with a plain (non-Kendo) select list and a plain text box by adding the following HTML:

<p>
    <label for="select">Plain old select</label>
    <select id="select" data-bind="value: fruitId">
        <option value="1">apple</option>
        <option value="2">orange</option>
        <option value="3">banana</option>
    </select>
</p>
<p>
    <label for="textBox">Plain old text box</label>
    <input id="textBox" type="text" data-bind="value: fruitId" />
</p>

But these controls were set to the correct initial value ("2" orange).

It gets weirder when you change the view model's value programmatically.  Here, I've added some HTML buttons to do that:

<p>
    <button id="changeTo3" class="k-button">change fruitId to "3" (banana) programmatically</button>
</p>
<p>
    <button id="changeTo2" class="k-button">change fruitId to "2" (orange) programmatically</button>
</p>

and some JavaScript to change the view model's values:

// Wire up the buttons
$("#changeTo3").click(function () {
    vm.fruitId("3"); // banana
});
$("#changeTo2").click(function () {
    vm.fruitId("2"); // orange
});

Clicking the buttons should change the view model's value, which should change the controls' values.  It works for the plain HTML controls, but not for the Kendo UI drop down.

Here's the JSFiddle to see all this in action.

The work around

A Kendo UI team blog post describes a work around for this issue, but it didn't work for me.

The trick here is that the Kendo UI drop down is really a hidden input and a bunch of spans.  Knockout changes the value of the hidden input when the view model changes, but you have to hook into that jQuery DOM change event and call the code to select a new value in the Kendo drop down.  Kind of lame, but it's supposed to work.

$("#kendoDropDown").bind("change", function() {
    $(this).data("kendoDropDownList").select(this.selectedIndex);
});

You can even unhide the hidden text box inside the Kendo UI drop down list and watch its value change as the view model changes, but the drop down just sits there.  Arg!

The real work around

I was pulling my hair out by now, and asked for help on Stack Overflow.  Unfortunately, the answer I got was use another library that does the integration in a different way, the Knockout-Kendo.js library.  That's probably a good answer, but I was hoping to avoid adding another library just to use Knockout and Kendo UI together.

Instead, I found I could get everything working as expected with a Knockout subscription.  It's like a view model data change listener.  My thinking was that I could use the same concept as the Kendo UI team blog post (listen for a change and then manually set the drop down).  Not ideal, but oh well.

Here's what I changed in the view model:

self.fruitId.subscribe(function (newValue) {
    $("#kendoDropDown").data("kendoDropDownList").value(newValue);
});

And the final, working JSFiddle.