Kendo DropDownList in Grid shows value after selection

Question

I am trying to use a dropdown in my grid. This is the definition of my grid:

$("#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 is a demo on JSBin to illustrate: http://jsbin.com/malev/3/edit

Mina is a two-part question.

• Why, in this example, does the default drop-down plant not match the value in the column?

• Why does the text switch to the value after the selection?

Answer 1

Take a look at the column definition:

{
    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) #"

.

( )