KendoUI DropDownList如何绑定

Question

Can someone please provide an example of how I can bind the following two properties to my BookType Kendo DropDown? I need to bind the dataTextField to "Name" and dataValueField to "BookTypeId".

The data is coming back in the form of the following:

books: Object
bookTypes: Array[4]
  0: Object
       ID: 1
       Name: "Web Development"
       BookTypeId: 1
  1: Object
       ID: 2
       Name: "Networking"
       BookTypeId: 2
  2: Object
       ID: 3
       Name: "Game Development"
       BookTypeId: 3
  3: Object
       ID: 4
       Name: "OS Development"
       BookTypeId: 4

Here is the call I'm making:

$.ajax({
async: false,
type: "GET",
url: "GetBookTypes",
contentType: "application/json",
dataType: "json",
success: function (res) {
    if (typeof res !== "undefined" && typeof res.Errors !== "undefined") {
        if (res.Errors.length > 0) {
            // Display each error
            for (var i = 0; i < res.Errors.length; i++) {
                alert(res.Errors[i].ErrorMessage);
            }
        }
    } else if (typeof res !== "undefined") {

        $("#BookType").kendoDropDownList({
            dataTextField: "Name",
            dataValueField: "BookTypeId",
            dataSource: res,
        }).data("kendoDropDownList");
    }
},
complete: function () {

},
error: function (res) {
    alert(res.responseText);
}

});

Answer 1

You need to bind the array data itself to the datasource:

$("#BookType").kendoDropDownList({ dataTextField: "Name", dataValueField: "BookTypeId", dataSource: res.bookTypes, });

See fiddle

But it is somewhat easier when you use remote datasource binding, like:

$("#BookType").kendoDropDownList({ dataTextField: "Name", dataValueField: "BookTypeId", dataSource: { transport: { read: { dataType: "jsonp", url: "GetBookTypes", } } } });

But you need your action to return an array of book types directly.