Question

我有以下Kendo Grid：

$("#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: "&nbsp;", 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

这是因为您正在设置data-text-field和data-value-field，但绑定到字符串列表。只需删除data-text-field和data-value-field即可。或者您可以保留它们，但dataSource需要是具有您在data-text-field和data-value-field中指定的属性的对象列表。

参见工作样本...... http://jsbin.com/mawik/1/edit

为什么这个Kendo Grid编辑器模板不能与自动完成小部件一起使用？

1 个答案: