Kendo UI Grid with DropDownList field that stores DropDownList Text and conditional update

Kendo Grid conditional update cell

by vrluckyin India

HTML

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.silver.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css">
<script src="https://kendo.cdn.telerik.com/2017.3.913/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>",
                        select: function(e) {
                            var id = e.item.find("span").attr("data-id");
                            var person =_grid.dataItem($(e.sender.element).closest("tr"));
                            person.roleId = id;
                            
                            setTimeout(function() {
                                $("#log")
                                    .prepend($("<div/>")
                                        .text(
                                            JSON.stringify(_grid.dataSource.data().toJSON())
                                         ).append("<br/><br/>")
                                    );
                                });
                        }
                    });
            }
  ...