Grid中的Kendo DropDownList在选择后显示值

Posted 2023-05-07

【中文标题】Grid中的Kendo DropDownList在选择后显示值

【英文标题】：Kendo DropDownList in Grid shows value after selection

【发布时间】：2014-03-14 04:17:16

【问题描述】：

我想在我的网格使用下拉列表。这是我的格网定义：

$("#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#"
    ]
);

这是我的编辑功能： P>

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 P>

矿是一个2部分的问题。 P>

为什么没有在此示例中默认为在列中的值的下拉之前它的编辑？

LI>

为什么文本转换为值作出选择之后

LI>

【参考方案1】：

看看你的列定义：

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

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

另一个问题是，如果您需要从编辑器更新模型上的两个属性，您需要手动执行此操作，例如像这样设置你的编辑器：

$('<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);
    
);

另一种方法是使用查找功能，为您提供给定值的显示文本，例如：

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

然后你可以在你的模板中使用它：

template: "#= getFruitName(FruitID) #"

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

(updated demo)