Kendo Grid - 使用下拉列表编辑器编辑行（编辑自定义编辑器）答案

【问题标题】：Kendo Grid - Line Editing Using A Drop-Down List Editor (Editing Custom Editor)Kendo Grid - 使用下拉列表编辑器编辑行（编辑自定义编辑器）
【发布时间】：2013-07-18 18:39:30
【问题描述】：

我正在使用this page 上提供的 Telerik 示例在 Kendo UI 网格中进行内联编辑，我想将“类别”列中的内联下拉列表绑定到 JSON 对象，而不是使用xml 数据他们在他们的演示中。当我使用 JSON 数据时，下拉列表不起作用。如何将 JSON 对象绑定到内联下拉列表？A fully working fiddle can be found here。

这里是绑定数据源的 JavaScript 函数。

function categoryDropDownEditor(container, options) {
    var categories = {
        'Category': [
            { 'CategoryName': 'Beverages', 'CategoryID': 1 },
            { 'CategoryName': 'Condiments', 'CategoryID': 2 },
            { 'CategoryName': 'Confections', 'CategoryID': 3 },
            { 'CategoryName': 'Dairy Products', 'CategoryID': 4 },
            { 'CategoryName': 'Grains/Cereals', 'CategoryID': 5 },
            { 'CategoryName': 'Meat/Poultry', 'CategoryID': 6 },
            { 'CategoryName': 'Produce', 'CategoryID': 7 },
            { 'CategoryName': 'Seafood', 'CategoryID': 8 }
        ]
    };

    $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataSource: categories
        });
}

【问题讨论】：

标签： javascript json telerik kendo-ui kendo-grid

【解决方案1】：

尝试更改以下内容。

var Category = 
 [
            { 'CategoryName': 'Beverages', 'CategoryID': 1 },
            { 'CategoryName': 'Condiments', 'CategoryID': 2 },
            { 'CategoryName': 'Confections', 'CategoryID': 3 },
            { 'CategoryName': 'Dairy Products', 'CategoryID': 4 },
            { 'CategoryName': 'Grains/Cereals', 'CategoryID': 5 },
            { 'CategoryName': 'Meat/Poultry', 'CategoryID': 6 },
            { 'CategoryName': 'Produce', 'CategoryID': 7 },
            { 'CategoryName': 'Seafood', 'CategoryID': 8 }
];

作为数据源使用

$('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataSource: Category
        });

【讨论】：

【解决方案2】：

function categoryDropDownEditor(container, options) {
    var categories = {
        'Category': [
            { 'CategoryName': 'Beverages', 'CategoryID': 1 },
            { 'CategoryName': 'Condiments', 'CategoryID': 2 },
            { 'CategoryName': 'Confections', 'CategoryID': 3 },
            { 'CategoryName': 'Dairy Products', 'CategoryID': 4 },
            { 'CategoryName': 'Grains/Cereals', 'CategoryID': 5 },
            { 'CategoryName': 'Meat/Poultry', 'CategoryID': 6 },
            { 'CategoryName': 'Produce', 'CategoryID': 7 },
            { 'CategoryName': 'Seafood', 'CategoryID': 8 }
        ]
    };

    $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            dataSource: categories.Category
        });
}

看上面，你需要使用属性绑定到数据源。由于 kendo 数据源需要一个 Array 对象。

【讨论】：