Load data to a Kendo Dropdown

Question

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.

JSON object

DropDown:

<div class="editor-field">
                @Html.DropDownListFor(model => model.selectedWorkItem, new SelectList(Model.lstWorkItemType), "Select Below...", new { @style = "width:200px;height:20px" })
 </div>

Ajax call:

<script type="text/javascript">
    $(document).ready(function () {

        $("#selectedProject").change(function () {

            var valid = $("#selectedProject").val();

            if (valid != "Select Below...") {

                var procemessage = "<option value='0'> Please wait...</option>";
                $("#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 < data.length; x++) {

                                ddl.setDataSource(data[x].Text);
                            }

                            ddl.refresh();
                        }

                    },
                    error: function (reponse) {
                        alert("error : " + reponse);
                    }
                });
            }
        });

    });
</script>

Answer 1

You need to specify the value and text fields to display in kendo dropdown first ,

  $("#selectedWorkItem").kendoDropDownList({
       dataTextField: "Text",
       dataValueField: "Value",
    });

And then change yoour success method like this to set the datasource, (I assume data is a JSON array )

 success: function (data) {        
      if (JSON.stringify(data) != "[]") {
              var ddl = $('#selectedWorkItem').data("kendoDropDownList");
                ddl.setDataSource(data);
        }
 },