Kendo Grid with Kendo Dropdownlist Selected value not updated

Question

In my kendo grid, i have kendodropdownlist for each column. A selected item should resolve and also show the template text

i have been following the example here http://jsfiddle.net/jddevight/Ms3nn/

UPDATE

I have simplified my issue in here http://jsfiddle.net/BlowMan/mf434/

Problem

When i select a an item in the dropdown, it does not return the value of the selected item. It rather returns null.

/// <reference path="../../jquery-1.8.2.js" />
/// <reference path="../../kendo.web.min.js" />
$(function () {
var menuModel = kendo.data.Model.define({
    fields: {
        "MenuId": { type: "number",editable:false },
        "DisplayText":{type:"string"},
        "MenuOrder": { type: "number" },
        "MenuStatus": { type: "boolean" },
        "HasKids": { type: "boolean" },
        "ParentMenu": { type: "number" }
    }
});

var menuDataSource = new kendo.data.DataSource({

    data:[{"MenuId":1,
    "DisplayText":"Home",
    "MenuOrder":0,
    "MenuStatus":true,
    "HasKids":false,
    "ParentMenu":null},
    {"MenuId":2,
    "DisplayText":"Finance",
    "MenuOrder":1,
    "MenuStatus":true,
    "HasKids":false,
    "ParentMenu":null}]
    schema: {
        model: menuModel
     }
});
var vm = kendo.observable({
    menus: menuDataSource,
    parentItem: [{ Id: 2, 
                    Name: "Finance" },
                { Id: 3, 
                Name: "Corp Services" }],
    getMenuName: function (pMenu) {
        var menuName = "";
        $.each(this.parentItem, function (idx, menu) {
            if (menu.Id == pMenu) {
                menuName = menu.Name;
                return false;
            }
        });
        return menuName;
    }
});
kendo.bind($("#menuItems"), vm);

var parentMenuEditor = function (container, options) {
    $("<input name='" + options.field + "'/>")
    .appendTo(container)
    .kendoDropDownList({
        dataSource: {
           data:[{ Id: 2, Name: "Finance" }, { Id: 3, Name: "Corp Services" }],
        },
        dataTextField: "Name",
        dataValueField: "Id"
    });
};

var grid = $("div[data-role='grid']").data("kendoGrid");
$.each(grid.columns, function (idx, column) {
    if (column.field == "ParentMenu") {
        column.editor = parentMenuEditor;

        return false;
    }
});

});

The view section below

        @{
            ViewBag.Title = "Menu System Index";
        }

        <h2>Menu System Index</h2>
        <div id="menuItems">
            <div class="k-toolbar k-grid-toolbar">
                <a class="k-button k-button-icontext k-grid-add" href="#">
                    <span class="k-icon k-add"></span>
                    Add Person
                </a>
             </div>
            <div data-role="grid" 
                 data-bind="source: menus" 
                 data-editable="true" 
                 data-filterable="true"
                 data-columns='[{"field": "MenuId", "title": "MenuId"}, 
                                {"field": "DisplayText", "title": "DisplayText"}, 
                                {"field": "MenuOrder", "title": "MenuOrder"}, 
                                {"field": "MenuStatus", "title": "MenuStatus"},
                                {"field":"HasKids","title":"HasKids"},                
                                {"field":"ParentMenu","title":"ParentMenu","template":"#= parent().parent().getMenuName(ParentMenu) #"},
                {"command": "destroy", "title": " ", "width": "110px"}]'>
            </div>
        </div>

        <script type="text/x-kendo-template" id="toolbar-template">
            <a class="k-button k-button-icontext k-grid-add" href="\#"><span class="k-icon k-add"></span>Add new record</a>
        </script>

        @section scripts{

            <script src="~/Scripts/Custom/MenuSystem/Index.js"></script>
        }

Any assistance will be much appreciated. This problem has me on my knees.

Answer 1

I have updated your JsFiddle demo. Please check it and let me know if any concern.

var roleEditor = function(container, options) {
$("<input name='" + options.field + "' data-text-field='name' data-value-field='id' data-bind='value:" + options.field + "'/>")

    .appendTo(container)
    .kendoDropDownList({
        dataSource: {
            data: vm.roles
        },
        dataTextField: "name",
        dataValueField: "id"
    });
};