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