Kendo DropDownList in Grid shows value after selection

梦想与她 提交于 2020-01-21 08:02:45

问题


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?


回答1:


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)



来源:https://stackoverflow.com/questions/21785535/kendo-dropdownlist-in-grid-shows-value-after-selection

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!