Kendo Grid mit deklarativem Editor Template

Question

Hoffentlich kann mir jemand dabei helfen - ich habe das 8 Stunden lang angeguckt und finde keine Lösung. Ich versuche, ein ziemlich einfaches Kendo UI MVVM-Gitter zu implementieren. Das Raster hat nur eine Liste von Rollen mit einer angehängten Kategorie. Wenn Sie auf "Bearbeiten" klicken, sollte das Raster eine Inline-Bearbeitung ermöglichen, und die Kategorie-Spalte sollte in ein Dropdown-Feld umgewandelt werden. Dies ist eine Vorlage, die auch an ein Feld im Ansichtsmodell gebunden ist.

Hier ist mein jsfiddle: http://jsfiddle.net/Icestorm0141/AT4XT/3/

Das Markup:

<script type="text/x-kendo-template" id="someTemplate"> 
    <select class="form-control categories" data-auto-bind="false" data-value-field="CategoryId" data-text-field="Description" data-bind="source: categories"></select> 
</script> 
<div class="manage-roles"> 
    <div data-role="grid" 
     data-scrollable="true" 
     data-editable="inline" 
     data-columns='[ 
          { "field" : "JobTitle", "width": 120, "title" : "Job Title Code" }, 
          { "field" : "Description" }, 
          { "field" : "Category", "template": "${Category}","editor" :kendo.template($("#someTemplate").html()) }, 
     {"command": "edit"}]' 
     data-bind="source: roles" 
     style="height: 500px"> 
    </div> 
</div> 

Und das javascript:

var roleViewModel = kendo.observable({ 
    categories: new kendo.data.DataSource({ 
     data: [ 
      { "CategoryId": 1, "Description": "IT" }, 
      { "CategoryId": 2, "Description": "Billing" }, 
      { "CategoryId": 3, "Description": "HR" }, 
      { "CategoryId": 4, "Description": "Sales" }, 
      { "CategoryId": 5, "Description": "Field" }, 
      { "CategoryId": 10, "Description": "Stuff" }, 
      { "CategoryId": 11, "Description": "Unassigned" } 
     ] 
    }), 
    roles: new kendo.data.DataSource({ 
     data: [ 
      { "RoleId": 1, "JobTitle": "AADM1", "Description": "Administrative Assistant I", "Category": "Stuff", "CategoryId": 10 }, 
      { "RoleId": 2, "JobTitle": "AADM2", "Description": "Administrative Assistant II", "Category": null, "CategoryId": 0 }, 
      { "RoleId": 3, "JobTitle": "ACCIN", "Description": "Accounting Intern", "Category": null, "CategoryId": 0 }, 
      { "RoleId": 4, "JobTitle": "ACCSU", "Description": "Accounting Supervisor", "Category": null, "CategoryId": 0 }, { "RoleId": 5, "JobTitle": "ACCTC", "Description": "Accountant", "Category": null, "CategoryId": 0 } 
     ] 
    }) 
}); 
kendo.bind($(".manage-roles"), roleViewModel); 

I haben die Editor-Vorlage Abbildung der Lage, herauszufinden, warum nicht die Drop verbindlich Nieder. Wenn ich das gleiche Markup für die Vorlage verwende und nicht an den Kategorienamen mit $ {Category} bindet, funktioniert es für die Template-Eigenschaft. (Aus irgendeinem Grund funktioniert das nicht in der Geige. Aber der exakt gleiche Code funktioniert lokal).

An diesem Punkt nehme ich irgendwelche Vorschläge/Ansätze nichts. Ich wollte wirklich MVVM und nicht die .kendoGrid() Syntax verwenden, aber ich werde über mich selbst hinwegkommen, wenn es nicht möglich ist. Hat jemand einen Einblick bekommen, was mit der Editor-Vorlage passiert?

Answer 1

Sie können immer noch Ihr Grid mit MVVM erstellen, aber ich denke, Sie müssen benutzerdefinierte Editoren mit einem Funktionsaufruf machen.

Also statt "editor" :kendo.template($("#someTemplate").html()), rufen Sie einfach eine Funktion.

edit: rolesViewModel.categoryEditor 

Siehe http://demos.kendoui.com/web/grid/editing-custom.html

Siehe Beispiel http://jsbin.com/UQaZaXO/1/edit