javascript - 为什么此 Kendo 网格编辑器模板不能与自动完成小部件一起使用？

Question

我有以下剑道网格:

$("#teachers").kendoGrid({
    dataSource: dataSource,
    toolbar: ["create"],
    columns: [
        { field: "employeeId", title: "Employee Id" },
        { field: "firstName", title: "First Name", editor: categoryDropDownEditor },
        { field: "lastName", title: "Last Name" },
        { field: "isHeadmaster", title: "Is a Headmaster?" },
        { command: ["edit", "destroy"], title: " ", width: "153px" }],
    editable: 'popup'
});

我遇到的问题不在于网格，而在于编辑器模板 - 正如您所看到的，我正在使用弹出编辑，并且我想为其中一个字段提供一个自动完成选择小部件。

以下是categoryDropDownEditor的定义方式:

function categoryDropDownEditor(container, options) {
    $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoAutoComplete({
            dataSource: [
                "Albania",
                "Andorra",
                "Armenia",
                /* ... */
                "Ukraine",
                "United Kingdom",
                "Vatican City"
            ],
            filter: "startswith"
        });
}

(我从样本 here 和 here 中拆解了这个函数。)

无论我输入什么，自动完成小部件都不起作用。根本没有显示任何建议。知道发生了什么吗？

Answer 1

这是因为您正在设置数据文本字段和数据值字段，但绑定(bind)到字符串列表。只需删除数据文本字段和数据值字段即可。或者您可以保留它们，但数据源需要是具有您在数据文本字段和数据值字段中指定的属性的对象列表。

查看工作示例... http://jsbin.com/mawik/1/edit