网格中的Kendo DropDownList在选择后显示值 [英] Kendo DropDownList in Grid shows value after selection

问题描述

我正在尝试使用网格中的下拉列表.这是我的网格定义:

I'm trying to use a drop-down list in my grid. This is my grid definition:

$("#grid").kendoGrid({
    editable: true,
    dataSource: {
        data: data,
        schema: {
            model: {
                fields: {
                    Name: {
                        type: "string",
                        editable: false
                    },
                    FruitName: {
                        type: "string"
                    },
                    FruitID: {
                        type: "number"
                    }
                }
            }
        }
    },
    columns: [{
        field: "Name",
        title: "Name",
        width: 150
    }, {
        field: "Fruit",
        title: "Fruit",
        width: 115,
        editor: renderDropDown,
        template: "#=FruitName#"
    }]
});

这是我的编辑器功能:

function renderDropDown(container, options) {
    var dataSource = [
    //{ name: "", id: null },
    {
        FruitName: "Apple",
        FruitID: 1
    }, {
        FruitName: "Orange",
        FruitID: 2
    }, {
        FruitName: "Peaches",
        FruitID: 3
    }, {
        FruitName: "Pears",
        FruitID: 4
    }];

    $('<input required  name="' + options.field + '"/>')
        .appendTo(container)
        .kendoDropDownList({
        dataTextField: "FruitName",
        dataValueField: "FruitID",
        dataSource: dataSource
    });
}

以下是有关JSBin的演示示例: http://jsbin.com/malev/3/edit

Here's a demo on JSBin for illustration: http://jsbin.com/malev/3/edit

我的问题分为两部分.

1. 为什么此示例中的下拉列表在编辑之前不默认为该列中的值?

1. Why isn't the dropdown in this sample defaulting to the value in the column before it's edited?

为什么选择后文本会切换到该值?

Why is the text switching to the value after the selection is made?

推荐答案

看看您的列定义:

{
    field: "Fruit",
    title: "Fruit",
    width: 115,
    editor: renderDropDown,
    template: "#=FruitName#"
}

您的字段名称是Fruit.在编辑器中，您绑定到该字段名称，但是您的模式模型和数据仅具有FruitID属性.这解释了为什么下拉菜单没有正确显示初始值.

Your field name is Fruit. In the editor, you bind to this field name, but your schema model and your data only have a FruitID property. This explains why the dropdown doesn't have show the initial value correctly.

另一个问题是，如果您需要通过编辑器更新模型上的两个属性，则需要手动进行操作，例如通过这样设置编辑器:

The other problem is that, if you need to update two properties on your model from the editor, you need to do that manually, e.g. by setting up your editor like this:

$('<input required  name="' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
    dataTextField: "FruitName",
    dataValueField: "FruitID",
    dataSource: dataSource,
    change: function (e) {
        var dataItem = e.sender.dataItem();
        options.model.set("FruitName", dataItem.FruitName);
    }
});

另一种选择是具有查找功能，该功能可以为您提供给定值的显示文本，例如:

The alternative would be to have a lookup function that gives you the display text for a given value, e.g.:

var fruitNames = ["", "Apple", "Orange", "Peaches", "Pears"];
function getFruitName(value) {
    return fruitNames[value];
}

然后您可以在模板中使用它:

Then you could use this in your template:

template: "#= getFruitName(FruitID) #"

，并且您在编辑器中不需要名称和更改处理程序的单独列.

and you wouldn't need the separate column for the name and the change handler in your editor.

(更新的演示)

这篇关于网格中的Kendo DropDownList在选择后显示值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！