Kendo Grid with Kendo Dropdownlist Выбранное значение не обновлено

Question

В моей сетке кендо у меня есть список для каждого столбца. Выбранный элемент должен решить, а также показать текст шаблона

я следовал примеру здесь http://jsfiddle.net/jddevight/Ms3nn/

UPDATE

Я упростил свой вопрос здесь http://jsfiddle.net/BlowMan/mf434/

Задача

Когда я выбираю элемент в раскрывающемся списке, он не возвращает значение выбранного элемента. Он скорее возвращает 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; 
    } 
}); 

});

Раздел вид ниже

 @{ 
      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> 
     } 

Любая помощь будет оценена. Эта проблема поставила меня на колени.

Answer 1

Я обновил демо-версию JsFiddle. Пожалуйста, проверьте его и сообщите мне, если вы беспокоитесь.

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" 
    }); 
};