网格中的剑道 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.

(更新演示)

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