title: MVVM binding for cascading DropDownList
body: <p>I have a web page with two <code>kendoDropDownList</code> using cascading. The first are <em>States</em> and the second <em>Cities</em>. When you choose a <em>State</em> then you are able the <em>City</em> to choose from the second <code>DropDownList</code>. This works perfectly well if I pick them using the mouse.</p>
  
  <p>The problem is when I try to bind some data to these DropDownLists where the <em>State</em> is updated but not the <em>City</em>. </p>
  
  <p>This is the HTML of my page:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;input id="state" name="state" data-bind="value: state"/&gt;
      &lt;input id="city" name="city" data-bind="value: city"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And this is the JavaScript:</p>
  
  <pre><code>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");
  </code></pre>
  
  <p>If I use the following code for binding the data:</p>
  
  <pre><code>kendo.bind($("#container"), { state:"California", city: "Berkeley" });
  </code></pre>
  
  <p>Unless <em>State</em> <code>DropDownList</code> already contains the value <code>California</code> it will not set <code>city</code> to <code>Berkeley</code>.</p>
  
  <p>Seems that using <code>bind</code> does not trigger a <code>change</code> event in <em>States</em> <code>DropDownList</code> and then <em>City</em> <code>DropDownList</code> is not reloaded with the <em>Cities</em> of the new <em>State</em>.</p>
  
  <p>You can find this code in <a href="http://jsfiddle.net/OnaBai/QUhEX/3/" rel="noreferrer">http://jsfiddle.net/OnaBai/QUhEX/3/</a></p>
  
  <p>How should I use <strong>cascading</strong> with <strong>MVVM binding</strong>?</p>