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 karthick Chandran

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>

CSS

.error {
    color:red;
}

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>",
                select: onSelect
            });
        }
    }],
    editable: true
}).data("kendoGrid");

function onSelect(e) {

    var name = $('td:first', $(e.sender.element).closest("tr")).text();
    var dataItema = this.dataItem(e.item.index());

    if ((this.dataSource.data()[e.item.index()].title) == 'Software Engineer') {
        if (name == 'Dave') {
            $('td:first', $(e.sender.element).closest("tr")).addClass('error');
        }
    }

    var id = e.item.find("span").attr("data-id");

}