KendoGrid 与 KendoDropDownList答案

【问题标题】：KendoGrid with KendoDropDownListKendoGrid 与 KendoDropDownList
【发布时间】：2016-03-03 18:46:35
【问题描述】：

我正在尝试在我的剑道网格的列中使用 kendoDropDownList，但它不起作用。

我正在关注this post 上的示例，但我想我遗漏了一些东西。

KendoGrid 数据源：

var comboDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                type: "GET",
                crossDomain: true,
                url: url,
                dataType: "json"
            }
        },
        schema: {
            data: "data",
            model: {
                id: "id",
                fields: {
                    id: { editable: false, nullable: true },
                    typeId: { field: "typeId", defaultValue: 1 },
                    value: { type: "number", validation: { required: true } }
                }
            }
        }
    });

KendoDropDownList 数据源：

var typesComboDataSource = new kendo.data.DataSource({
    transport: {
        read: {
            type: "GET",
            crossDomain: true,
            url: url,
            dataType: "json"
        }
    },
    schema: {
        data: "data",
        model: {
            id: "typeId",
            fields: {
                typeId: { editable: false, nullable: true },
                description: { validation: { required: true } }
            }
        }
    }
});

KendoGrid：

$("#grid").kendoGrid({
    editable: true,
    toolbar: ["create", "save", "cancel"],
    dataSource: comboDataSource,
    columns: [{
        title: "Type",
        field: "typeId",
        editor: typeDropDownEditor,
        template: "#=getType(typeId)#"
    }, {
        title: "Value",
        field: "value"
    }]
})

function typeDropDownEditor(container, options) {
    $('<input data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        dataTextField: "description",
        dataValueField: "typeId",
        dataSource: typesComboDataSource,
        change: function (e) {
            var dataItem = e.sender.dataItem();
            options.model.set("typeId", dataItem.typeId);
        }
    });
}

function getType(typeId) {
    var data = typesComboDataSource.data();
    for (var idx = 0, length = data.length; idx < length; idx++) {
        if (data[idx].typeId === typeId) {
            return data[idx].description;
        }
    }
}

由于某种原因，我收到了错误 ReferenceError: getType is not defined，但我不知道为什么。

如果我将函数直接放在模板上，我的数据会被加载，但类型字段显示为undefined。我的typesComboDataSource 没有被触发。

$("#grid").kendoGrid({
    editable: true,
    toolbar: ["create", "save", "cancel"],
    dataSource: comboDataSource,
    columns: [{
        title: "Type",
        field: "typeId",
        editor: typeDropDownEditor,
        template: function getType(typeId) {
            var data = typesComboDataSource.data();
            for (var idx = 0, length = data.length; idx < length; idx++) {
                if (data[idx].typeId === typeId) {
                    return data[idx].description;
                }
            }
        }
    }, {
        title: "Value",
        field: "value"
    }]
});

有人可以帮帮我吗？谢谢！

【问题讨论】：

标签： telerik kendo-grid datasource kendo-dropdown

【解决方案1】：

您的模板函数在运行时在 JQuery 代码块范围之外进行评估，因此当代码实际运行时它不知道 getType 是什么。将 typeDropDownEditor() 和 getType() 函数移到你的 JQuery 块之外，你应该很高兴。

这是一个 JSBin 示例，显示了您要完成的工作： http://jsbin.com/woxidojiyu/edit?js,output

【讨论】：