KendoUI DropDownList如何绑定

时间:2014-05-04 23:23:10

标签: javascript

有人可以提供一个示例,说明如何将以下两个属性绑定到我的BookType Kendo DropDown吗?我需要将dataTextField绑定到" Name"和dataValueField到" BookTypeId"。

数据以下列形式返回:

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

以下是我正在制作的电话:

$.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);
}

});

1 个答案:

答案 0 :(得分:0)

您需要将数组数据本身绑定到数据源:

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

See fiddle

但是使用远程数据源绑定时更容易,例如:

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

但是你需要你的动作直接返回一系列书籍类型。