Kendo DropDownList in Grid shows value after selection

Question

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

Mine is a 2 part question.

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

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

Solution

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.

(updated demo)