带有声明性编辑器模板的Kendo网格

Question

希望有人可以帮助我 - 我已经盯着这个8小时,似乎无法找到解决方案.我正在尝试实现一个非常简单的Kendo UI MVVM网格.网格只有一个带有附加类别的角色列表.单击"编辑"时,网格应允许内联编辑,类别列应变为下拉列表 - 这是一个也绑定到视图模型中的字段的模板.

这是我的jsfiddle:http://jsfiddle.net/Icestorm0141/AT4XT/3/

标记:

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

和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);

我还没弄清楚为什么编辑器模板没有绑定下拉列表.当我对模板使用相同的标记而不是使用$ {Category}绑定到类别名称时,它适用于模板属性.(由于某些原因,这在小提琴中不起作用.但完全相同的代码在本地工作).

在这一点上,我会采取任何建议/方法.我真的很想使用MVVM而不是.kendoGrid()语法,但是如果不能做到的话,我会克服自己.任何人都可以深入了解编辑器模板的最新进展？

Answer 1

您仍然可以使用MVVM构建网格,但我认为您必须使用函数调用来创建自定义编辑器.

所以代替"editor" :kendo.template($("#someTemplate").html()),你只需要调用一个函数.

edit: rolesViewModel.categoryEditor

请参阅http://demos.kendoui.c​​om/web/grid/editing-custom.html

请参见示例http://jsbin.com/UQaZaXO/1/edit