title: Kendo-UI Cascading ComboBox client filtering
body: <p>I'm using cascading comboboxes to narrow down a choice for, say cities. My scenario differs slightly from the examples provided on <a href="http://kendoui.com" rel="nofollow">http://kendoui.com</a> since I can't make asynchronous server calls after the page is loaded.</p>
  
  <p>Here's an example of my code:</p>
  
  <hr>
  
  <p>HTML</p>
  
  <pre><code>&lt;p&gt;
      &lt;label for="Country"&gt;Country:&lt;/label&gt;
      &lt;input id="country"/&gt;
  &lt;/p&gt;
  &lt;p&gt;
      &lt;label for="City"&gt;City:&lt;/label&gt;
      &lt;input id="city" disabled="disabled" /&gt;
  &lt;/p&gt;
  </code></pre>
  
  <hr>
  
  <p>Script (adding the datasource inline for simplicity)</p>
  
  <pre><code>$("#country").kendoComboBox({
      placeholder: "Select a country...",
      dataTextField: "CountryName",
      dataValueField: "CountryID",
      dataSource: new kendo.data.DataSource({
              data: [
              {
                      CountryID: "1",
                      CountryName: "Sweden"
              },
              {
                      CountryID: "2",
                      CountryName: "Spain"
              }]
      }),
  });
  
  $("#city").kendoComboBox({
      autoBind: false,
      cascadeFrom: "country",
      placeholder: "Select city...",
      dataTextField: "CityName",
      dataValueField: "CountryID",
      dataSource: new kendo.data.DataSource({
              data: [
              {
                      CountryID: "1",
                      CityID: "1",
                      CityName: "Stockholm"
              },
              {
                      CountryID: "1",
                      CityID: "2",
                      CityName: "Gothenburg"
              },
              {
                      CountryID: "1",
                      CityID: "3",
                      CityName: "Malmo"
              },
              {
                      CountryID: "2",
                      CityID: "4",
                      CityName: "Madrid"
              }]
      }),
  })
  </code></pre>
  
  <p>This works indeed, picking 'Sweden' in the first list will generate Stockholm, Gothenburg and Malmo in the second box. But requires that one use the same dataValueField for both child and parent, hence when I've selected a city, the selected value will be CountryID instead of CityID which I want.</p>
  
  <p>The right way to go about it (I guess) should be to use dataValueField: CityID in #city and do a client side select/filtering similar to: (Note, pseudo code)</p>
  
  <pre><code>SELECT CityID, CityName WHERE CountryID EQUALS country.dataValue
  </code></pre>
  
  <p>That would fetch the right dataValue (CityID) from the city combobox when a city is selected. </p>
  
  <p>Does anyone know how to solve this? Any help is greatly appreciated!</p>