editor & dataSource

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<div id="grid"></div>
<div id="display"></div>

JavaScript

var myData = [];

for (var i = 1; i < 4; i++) {
    var item = {
        id: i,
        value: i
    };
    
    myData.push(item);
}

$("#grid").kendoGrid({
    dataSource: {
        data: myData,
        schema: {
            model: {
                id: "id",
                fields: {
                    id: {type: "number"},
                    value: {type: "number"}                    
                }
            }                
        },
        pageSize: 10,
        change: function(e) {
            $("#display").html(JSON.stringify(this.view()));   
        }
    },
    columns: [
        "id",
        {template: "<input class='dropdown' value='#= value #'", title: "Value"}
    ],
    dataBound: function(e) {
        $(".dropdown").kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            dataSource: {
                data: [
                    {text: 1, value: 1},
                    {text: 2, value: 2},
                    {text: 3, value: 3}
                ]
            },
            change: function(e) {
                 var element = this.element,
                     grid = $("#grid").data("kendoGrid"),
                     model = grid.dataItem(element.closest("tr"));
                
                model.set("value", this.value());
            }
        })
    }
})