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

Posted 2023-05-07

【中文标题】带有声明性编辑器模板的 Kendo 网格

【英文标题】：Kendo grid with declarative editor template

【发布时间】：2014-02-13 09:37:08

【问题描述】：

希望有人能帮我解决这个问题 - 我已经盯着这个问题看了 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() 语法，但如果做不到，我会克服自己的。有人对编辑器模板的情况有任何了解吗？

【参考方案1】：

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

因此，您只需调用一个函数，而不是 "editor" :kendo.template($("#someTemplate").html())。

edit: rolesViewModel.categoryEditor

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

查看示例http://jsbin.com/UQaZaXO/1/edit

【讨论】：

是的，这就是我最终不得不做的。显然，要做到这一点，您需要使用 kendo 小部件（就像您在 jsbin 中所做的那样）。我希望仅以声明方式使用它（以便我可以控制 HTML 输出），但这看起来不太可能。

我认为问题在于，当调用 kendo.bind 时，编辑器的脚本模板实际上并不存在，而是在您实际编辑行时被放入。所以 可能 可以使用脚本，但您必须调用 kendo.bind(some-crazy-selector, rolesViewModel) 才能使其工作。我试过了，但是不行。