title: Populating kendo MVC combo box based on another kendo combobox
body: <p>I am trying to populate the value of one combo box based on selection of another combo box. I am using kendo mvc combo box in MVC 5 application. In my case , I am trying to populate the Sales Office combo box based on selection of SalesOrganisation combo box.In order to do that I would need to call the controller method of SalesOffice combo and pass the country code value.  I have written a ajax method on the change event of the drop down control of the Sales Organisation. Its calling the controller method. I can see the method firing but when I do an alert on the data in the javascript code, the value is showing [object] [object].The status however is showing success Not sure what is wrong. How do I get the Sales Office dropdown populated</p>
  
  <p><strong>Combobox</strong></p>
  
  <pre><code>  &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.Company, htmlAttributes: new { @class = "control-label col-md-4" })
                  &lt;div class="col-md-6"&gt;
                      &lt;div class="editor-field"&gt;
                          @(Html.Kendo().ComboBoxFor(model =&gt; model.Company)
                              .Name("SalesOrganisation")
                              .HtmlAttributes(new { style = "width:300px" })
                              .DataTextField("Company")
                              .DataValueField("CountryCode")
  
                              .DataSource(dataSource =&gt; dataSource
                              .Read(read =&gt; read.Action("RequestHeader_SalesOrganisation", "Request").Type(HttpVerbs.Post))
  
                              )
                               .Events(e =&gt;
                               {
                                   e.Change("onChange");
                               })
                          )
                      &lt;/div&gt;
                      @Html.ValidationMessageFor(model =&gt; model.Company, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="clearfix"&gt;&lt;/div&gt;
              &lt;div class="form-group"&gt;
                  @Html.LabelFor(model =&gt; model.SalesOffice, htmlAttributes: new { @class = "control-label col-md-4" })
                  &lt;div class="col-md-6"&gt;
                      &lt;div class="editor-field"&gt;
                          @(Html.Kendo().ComboBoxFor(model =&gt; model.SalesOffice)
                              .Name("SalesOffice")
                              .HtmlAttributes(new { style = "width:300px" })
                              .DataTextField("SalesOffice")
                              .DataValueField("SalesOfficeID")
  
                              .DataSource(dataSource =&gt; dataSource
                              .Read(read =&gt; read.Action("RequestHeader_SalesOffice", "Request").Type(HttpVerbs.Post))
                              )
                          )
                      &lt;/div&gt;
                      @Html.ValidationMessageFor(model =&gt; model.SalesOffice, "", new { @class = "text-danger" })
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p><strong>SalesOffice controller method</strong></p>
  
  <pre><code>    public ActionResult RequestHeader_SalesOffice(string id)
              {
                  var response = requestRepository.GetSalesOffice(id).AsQueryable().ProjectTo&lt;SalesOfficeViewModel&gt;();
  
                  var jsonResult = Json(response, JsonRequestBehavior.AllowGet);
                  jsonResult.MaxJsonLength = int.MaxValue;
                  return jsonResult;
              }
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code> function onChange() {
  
          alert($('#SalesOrganisation').val());
  
          var ServiceUrl = "/CC.GRP.MCRequest/Request/RequestHeader_SalesOffice?id=" + $('#SalesOrganisation').val();
          var content = '';
          $.support.cors = true;
  
          $.ajax({
              type: 'Post',
              url: ServiceUrl,
              async: true,
              cache: false,
              crossDomain: true,
              contentType: "application/json; charset=utf-8",
              dataType: 'json',
              error: function (xhr, err) {
              },
              success: function (data, status) {
                  $('#SalesOffice').val(data);
                  alert(data);
                  alert(status);
              }
          });
      }
  </code></pre>