title: Load data to a Kendo Dropdown
body: <p>I'm trying to bind data to a Kendo Dropdown using an ajax call. call gets the data successfully but the kendo dropdown does not show any data.</p>
  
  <p>JSON object</p>
  
  <p><img src="https://i.stack.imgur.com/ow5Mg.jpg" alt="enter image description here"></p>
  
  <p>DropDown:</p>
  
  <pre><code>&lt;div class="editor-field"&gt;
                  @Html.DropDownListFor(model =&gt; model.selectedWorkItem, new SelectList(Model.lstWorkItemType), "Select Below...", new { @style = "width:200px;height:20px" })
   &lt;/div&gt;
  </code></pre>
  
  <p>Ajax call:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function () {
  
          $("#selectedProject").change(function () {
  
              var valid = $("#selectedProject").val();
  
              if (valid != "Select Below...") {
  
                  var procemessage = "&lt;option value='0'&gt; Please wait...&lt;/option&gt;";
                  $("#selectedWorkItem").html(procemessage).show();
                  var murl = "/TFS/TFSProjectDetails/";
  
                  $.ajax({
                      url: murl,
                      data: { pName: valid },
                      cache: false,
                      type: "POST",
                      success: function (data) {
  
                          if (JSON.stringify(data) != "[]") {
                              var ddl = $('#selectedWorkItem').data("kendoDropDownList");
                              for (var x = 0; x &lt; data.length; x++) {
  
                                  ddl.setDataSource(data[x].Text);
                              }
  
                              ddl.refresh();
                          }
  
                      },
                      error: function (reponse) {
                          alert("error : " + reponse);
                      }
                  });
              }
          });
  
      });
  &lt;/script&gt;
  </code></pre>