title: Cascading of Kendo Dropdownlist with json object
body: <p>I am trying to do a cascade of dropdowns in which change in the countries  will get states and bind to another dropdown which shows states.
  I have checked documentation available in the kendoui website in which they have documented the way of cascading
  using it's Events(CascadeFrom and so on.) but I do not want to do in this way.
  As it is a double trip to database . First after loading the page, it binds countries(Calls database and get countries) and then 
  it binds states after country is changed.</p>
  
  <p>But I have done in a different manner. I bind Countries Dropdownlist
  on page load so I saved one trip that is made to database for loading the
  countries after page is loaded but I wonder If I can call the change of
  countries dropdown in the following way and then bind states by json object.</p>
  
  <p>This is countries dropdown which is binded successfully in view page</p>
  
  <pre><code> @(Html.Kendo().DropDownListFor(model =&gt; model.Country)
  
                                        .DataTextField("Text")
  
                                        .DataValueField("Value")
  
                                        .BindTo(Model.CountriesTemp)
  
                                        )
  </code></pre>
  
  <p>Below is States list which will get record on the basis of change in countries dropdown.</p>
  
  <pre><code>  @(Html.Kendo().DropDownListFor(model =&gt; model.State)
                                        .DataTextField("Text")
                                        .DataValueField("Value")
                                        .BindTo(Model.States))
  </code></pre>
  
  <p>For Binding Countries and states with page load, I have done this in controller.</p>
  
  <pre><code>public class HomeController : Controller
      {
    public ActionResult Registration()
          {
              RegistrationModel Model = new RegistrationModel();
  
              Model.CountriesTemp = new SelectList(ObjService.GetCountries(), "CountryID", "Country_Name");
              Model.States = new SelectList(ObjService.GetStates(), "Id", "StateName");
      return View(Model);
          }
  
              public JsonResult GetStatesForCountry(string CountryId)
          {
              RegistrationService ObjService = new RegistrationService();
              var StatesList =ObjService.GetStatesForCountries(Convert.ToInt32(CountryId));
              return Json(new { JsonStates = StatesList });
          }  
  }        
  </code></pre>
  
  <p>This is my model::</p>
  
  <pre><code>public SelectList CountriesTemp { get; set; }
   public SelectList States { get; set; }
  </code></pre>
  
  <p>I have binded successfully both of the dropdowns , Now I want to do cascading for which I have written below script in my view page:</p>
  
  <pre><code>$(document).ready(function () {
      $("#Country").change(function () {
          var val = $("#Country").val();
          $.post("/Home/GetStatesForCountry", { CountryId: val }, function (Response) {
              var States = $("#State").data("kendoDropDownList");
  
          });
      });
  });
  </code></pre>
  
  <p>And the function "GetStatesForCountry" is already defined in above controller but I am confused for how to use the returned json object and bind the kendodropdownlist which shows "states".</p>