Kendo grid with declarative editor template

Question

Hopefully someone can help me with this - I've been staring at this for 8 hours and can't seem to find a solution. I'm trying to implement a pretty simple Kendo UI MVVM grid. The grid just has a list of roles with an attached category. When you click edit, the grid should allow an inline edit and the category column should turn into a drop down - which is a template that is also bound to a field in the view model.

Here's my jsfiddle: http://jsfiddle.net/Icestorm0141/AT4XT/3/

The 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>

And the 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 havent been able to figure out why the editor template is not binding the drop down. When I use the same markup for template rather than binding to the category name with ${Category}, it works for the template property. (For some reason this doesnt work in fiddle. But the exact same code works locally).

At this point I'll take any suggestions/approaches anything. I really wanted to use MVVM and not the .kendoGrid() syntax but I'll get over myself if it cannot be done. Anyone got any insight into whats going on with the editor template?

Answer 1

You can still build your grid using MVVM, but I think you have to make custom editors with a function call.

So instead of "editor" :kendo.template($("#someTemplate").html()), you just call a function.

edit: rolesViewModel.categoryEditor

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

See sample http://jsbin.com/UQaZaXO/1/edit