使用下拉列表编辑器的剑道网格-线编辑(编辑自定义编辑器)

Kendo Grid - Line Editing Using A Drop-Down List Editor (Editing Custom Editor)

本文关键字:编辑 编辑器 自定义 下拉列表 网格      更新时间:2023-09-26

我使用本页提供的示例Telerik在Kendo UI网格中进行内联编辑,我想将内联下拉列表绑定到"类别"列中"绑定到JSON对象,而不是使用他们在演示中的xml数据。当我使用JSON数据时,下拉列表不起作用。我如何将JSON对象绑定到内联下拉列表?可以在这里找到一个完全起作用的fiddle。

这是绑定数据源的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
        });
}

尝试更改以下内容。

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

看看上面的内容,您需要使用属性来绑定到数据源。由于剑道数据源是Array对象所必需的。