Kendo UI Grid with DropDownList field that stores DropDownList Text and Value in grid dataSource

Display the Text from the selected item in the DropDownList and also capture the Value. Store both in the grid.

by lhoeppner

HTML

<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">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="grid"></div>
<br/>
<div id="log"></div>

JavaScript

var _roleDataSource = new kendo.data.DataSource({
    data: [{
        id: 1,
        title: "Software Engineer"
    }, {
        id: 2,
        title: "Quality Assurance Engineer"
    }, {
        id: 3,
        title: "Team Lead"
    }]
});

var _peopleDataSource = new kendo.data.DataSource({
    data: [{
        id: 1,
        name: "John",
        roleId: 1,
        roleTitle: "Software Engineer"
    }, {
        id: 2,
        name: "Dave",
        roleId: 2,
        roleTitle: "Quality Assurance Engineer"
    }, {
        id: 3,
        name: "Aaron",
        roleId: 3,
        roleTitle: "Team Lead"
    }]
});

var grid = $("#grid").kendoGrid({
    dataSource: _peopleDataSource,
    columns: [{
        field: "name",
        title: "Name"
    }, {
        field: "roleTitle",
        title: "Role",
        editor: function (container, options) {
            $("<input data-bind='value:roleTitle' />")
                .attr("id", "ddl_roleTitle")
                .appendTo(container)
                .kendoDropDownList({
                dataSource: _roleDataSource,
                dataTextField: "title",
                dataValueField: "title",
                template: "<span data-id='${data.id}'>${data.title}</span>",
                change: function (e) {
                    // select other column by index, for example
                    var secondColumn = $(e.sender.element).closest("td").siblings().eq(0);
                    var name = $(secondColumn).find("input").attr("name");
                    secondColumn.empty();
                    var model = grid._modelForContainer(secondColumn);

                    $("<input data-bind='value: " + name + "'/>").appendTo(secondColumn).kendoDatePicker();
                    kendo.bind(secondColumn, model);
                }
            });
        }
    }, {
        command: ["edit"],
        title: "&nbsp;",
        width: "172px"
    }],
    editable: "inline"
}).data("kendoGrid");