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?