I have a webpage with two kendoDropDownList using cascading. The first are the states and the second city. When you select a state, you can select a city from the second DropDownList . This works fine if I select them with the mouse.
The problem is that I'm trying to associate some data with these DropDownLists, where the state is updated, but not with 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 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 to bind data:
kendo.bind($("#container"), { state:"California", city: "Berkeley" });
If State DropDownList already contains a California value, it will not set city to Berkeley .
It seems that using bind does not trigger a change event in DropDownList states, and then City DropDownList does not restart with Cities of the new state.
You can find this code at http://jsfiddle.net/OnaBai/QUhEX/3/
How to use cascading with MVVM binding ?