javascript 网格中的剑道 DropDownList 显示选择后的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21785535/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Kendo DropDownList in Grid shows value after selection
提问by user3308844
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#"
}]
});
And this is my editor function:
这是我的编辑器功能：
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
});
}
Here's a demo on JSBin for illustration: http://jsbin.com/malev/3/edit
这是 JSBin 上的演示示例：http: //jsbin.com/malev/3/edit
Mine is a 2 part question.
我的是一个两部分的问题。
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?
为什么此示例中的下拉列表在编辑之前不默认为列中的值？
为什么选择后文本会切换到值？
回答by Lars H?ppner
Take a look at your column definition:
看看你的列定义：
{
field: "Fruit",
title: "Fruit",
width: 115,
editor: renderDropDown,
template: "#=FruitName#"
}
Your field name is Fruit. In the editor, you bind to this field name, but your schema model and your data only have a FruitIDproperty. This explains why the dropdown doesn't have show the initial value correctly.
您的字段名称是Fruit. 在编辑器中，您绑定到此字段名称，但您的架构模型和您的数据只有一个FruitID属性。这解释了为什么下拉列表没有正确显示初始值。
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.
并且您不需要单独的名称列和编辑器中的更改处理程序。
（更新演示）
