MVVM binding for cascading DropDownList

Question

I have a web page with two kendoDropDownList using cascading. The first are States and the second Cities. When you choose a State then you are able the City to choose from the second DropDownList. This works perfectly well if I pick them using the mouse.

The problem is when I try to bind some data to these DropDownLists where the State is updated but not the City.

This is the HTML of my page:

<div id="container">
    <input id="state" name="state" data-bind="value: state"/>
    <input id="city" name="city" data-bind="value: city"/>
</div>

And this is the JavaScript:

var state = $("#state").kendoDropDownList({
    dataTextField: "state",
    dataValueField:"state",
    dataSource:    {
        serverFiltering:true,
        data:           states
    },
    change:        function () {
        console.log("state changed");
    }
}).data("kendoDropDownList");

var city = $("#city").kendoDropDownList({
    autoBind:      false,
    dataTextField: "city",
    dataValueField:"city",
    cascadeFrom:   "state",
    dataSource:    {
        serverFiltering:true,
        transport:      {
            read:function (operation) {
                var ds = cities [state.value()];
                if (ds) {
                    return operation.success(ds);
                } else {
                    return operation.success(["N/A"]);
                }
            }
        }
    }
}).data("kendoDropDownList");

If I use the following code for binding the data:

kendo.bind($("#container"), { state:"California", city: "Berkeley" });

Unless State DropDownList already contains the value California it will not set city to Berkeley.

Seems that using bind does not trigger a change event in States DropDownList and then City DropDownList is not reloaded with the Cities of the new State.

You can find this code in http://jsfiddle.net/OnaBai/QUhEX/3/

How should I use cascading with MVVM binding?

You better try binding the dropdownlists using the source binding. Would make your code simpler. Here are a few examples: http://demos.kendoui.com/web/mvvm/widgets.html — Atanas Korchev, Nov 24 '12 at 10:19
@AtanasKorchev those examples are about generic Widgets binding. I don't see anything specific to cascading dropdownlists. Shall I understand that even that `DropDownLists` support binding, `Cascading DropDownList` do not? If so, then I _fix_ the sources adding firing the `change` event when setting a `DropDownList` value (I already have a working version). I was actually looking for the correct way of using it if any. — OnaBai, Nov 24 '12 at 11:02
I've shown you that example to see how the source binding is used. It will simplify your code a lot. Also calling kendo.bind multiple times is not considered best practice. Normally you should call it only once and MVVM should do the rest. — Atanas Korchev, Nov 24 '12 at 16:12
By the way, what I did was add `that.trigger("change");` in `value` function of `kendoDropDownList` Widget. But I was not able to see possible side-effect and that's why I preferred to have the _official_ solution. — OnaBai, Nov 24 '12 at 21:54

score 6 · Accepted Answer · answered Nov 24 '12 at 16:28

6

I've prepared a demo showing how to use cascading dropdownlists with MVVM: http://jsbin.com/ujorer/1/edit

answered Nov 24 '12 at 16:28

Atanas Korchev

30,562
8
59
93

Nevertheless, you still cannot update the `city` programmatically. You need to add `that.trigger("change");` to `value` in `kendoDropDownList`. Check what I mean in http://jsbin.com/ujorer/3/ – OnaBai Nov 26 '12 at 13:38
Yep. Should have worked. Will see if we can fix that in a future release. Until then you can manually trigger the change event. – Atanas Korchev Nov 27 '12 at 07:45

MVVM binding for cascading DropDownList

1 Answers1

Linked