希望有人能帮我解决这个问题——我已经盯着这个看了 8 个小时,似乎找不到解决方案。我正在尝试实现一个非常简单的 Kendo UI MVVM 网格。网格只有一个带有附加类别的角色列表。当您单击编辑时,网格应该允许内联编辑,并且类别列应该变成一个下拉列表 - 这是一个也绑定(bind)到 View 模型中的字段的模板。
这是我的 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);
我无法弄清楚为什么编辑器模板没有绑定(bind)下拉菜单。当我对模板使用相同的标记而不是使用 ${Category} 绑定(bind)到类别名称时,它适用于模板属性。 (由于某种原因,这在 fiddle 中不起作用。但是完全相同的代码在本地工作)。
在这一点上,我会接受任何建议/方法。我真的很想使用 MVVM 而不是 .kendoGrid() 语法,但如果做不到,我会克服自己的。有人对编辑器模板的情况有任何了解吗?
最佳答案
您仍然可以使用 MVVM 构建网格,但我认为您必须使用函数调用来制作自定义编辑器。
所以而不是"editor" :kendo.template($("#someTemplate").html())
,你只需调用一个函数。
edit: rolesViewModel.categoryEditor
见 http://demos.kendoui.com/web/grid/editing-custom.html
见 sample http://jsbin.com/UQaZaXO/1/edit
关于mvvm - 带有声明性编辑器模板的 Kendo 网格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21298004/