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.

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>",
                        select: function(e) {
                            var id = e.item.find("span").attr("data-id");
                            var person =_grid.dataItem($(e.sender.element).closest("tr"));
                            person.roleId = id;
                            console.log(id);
                            /*
                            setTimeout(function() {
                                $("#log")
                                    .prepend($("<div/>")
                                        .text(
                                            JSON.stringify(_grid.dataSource.data().toJSON())
                                         ).append("<br/><br/>")
                                    );
                                });*/
                 ...