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 _typeDataSource = new kendo.data.DataSource({
    data: [{
        id: 1,
        title: "String"
    }, {
        id: 2,
        title: "Number"
    }, {
        id: 3,
        title: "DateTime"
    }]
});

var _peopleDataSource = new kendo.data.DataSource({
    data: [{
        id: 1,
        name: "John",
        typeId: 1,
        typeTitle: "String"
    }, {
        id: 2,
        name: "12345",
        typeId: 2,
        typeTitle: "Number"
    }, {
        id: 3,
        name: "12/20/2013",
        typeId: 3,
        typeTitle: "DateTime"
    }]
});

var controlOptions = {
    "kendoDateTimePicker": {
        value: new Date(),
        format: "MM/dd/yyyy hh:mm",
        parseFormats: "MM/dd/yyyy hh:mm"
    }
};

var grid = $("#grid").kendoGrid({
    dataSource: _peopleDataSource,
    columns: [{
        field: "typeTitle",
        title: "Type",
        editor: function (container, options) {
            $("<input data-bind='value:typeTitle' />")
                .attr("id", "ddl_typeTitle")
                .appendTo(container)
                .kendoDropDownList({
                dataSource: _typeDataSource,
                dataTextField: "title",
                dataValueField: "title",
                template: "<span data-id='${data.id}'>${data.title}</span>"
            });
        }
    }, {
        field: "name",
        title: "Data",
        editor: function (container, options) {
            if (options.model.typeTitle === "DateTime") {
                $("<input data-bind='value:name' />")
                    .appendTo(container).kendoDateTimePicker(controlOptions["kendoDateTimePicker"]);
            } else if (options.model.typeTitle === "String") {
                $("<input data-bind='value:name' />")
                    .appendTo(container);
            } else if (options.model.typeTitle === "Number") {
                $("<input data-bind='value:name' />")
                    .appendTo(container).kendoNumericTextBox();
            }

      ...