Question

我试图在我的剑道网格列中使用kendoDropDownList但它无效。

我跟随this post上的示例，但我想我错过了一些东西。

KendoGrid DataSource：

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 DataSource：

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

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

Answer 1

您的模板函数在运行时在JQuery代码块范围之外进行计算，因此它不知道代码实际运行时getType是什么。将typeDropDownEditor（）和getType（）函数移到JQuery块之外，你应该好好去。

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

KendoGrid与KendoDropDownList

1 个答案: