标题可能令人困惑,但我很难用一句话来解释自己,所以请继续阅读更详细的场景。
我正在尝试获取 Kendo UI DropDownList在 Kendo UI Grid 中用作编辑器时工作正常。
我认为有以下@model;
{
"DataItems": [
{ "Id": 1, "Name": "Foo", "Category": { "Id": 1 } },
{ "Id": 2, "Name": "Bar", "Category": { "Id": 2 } }
],
"CategoryOptions": [
{ "Id": 1, "Name": "A" },
{ "Id": 2, "Name": "B" },
{ "Id": 3, "Name": "C" }
],
}
这将传递给我的脚本,该脚本在初始化时构造以下数据源和网格
var gridDataSource = new kendo.data.DataSource({
data: _model.DataItems,
schema: {
model: {
id: "Id",
fields: {
Id: { type: "number", editable: false, nullable: false },
Name: { type: "string", validation: { required: true } },
Category: { type: "object" },
}
},
}
});
$("#grid").kendoGrid({
dataSource: _model.DataItems,
columns: [
{ field: "Id", hidden: true },
{ field: "Name", width: "200px", title: "Name", },
{ field: "Category", title: "Category", editor: categoryDropDownList, template: "#= (Category != null && Category.Name !== null) ? Category.Name : ' ' #" },
{ command: "destroy", title: " "}
],
toolbar: ["save", "cancel"],
editable: true,
});
您会注意到该网格是内联可编辑的,因此单击单元格将允许您编辑其内容。为了编辑Category
,我添加了一个自定义编辑器 (categoryDropDownList),它显示 _model.CategoryOptions。
function categoryDropDownList(container, options) {
$('<input data-value-field="Id" data-text-field="Name" data-bind="value:' + options.field + '"/>').appendTo(container)
.kendoDropDownList({
dataSource: _model.CategoryOptions,
dataValueField: "Id",
dataTextField: "Name",
});
}
这似乎按预期工作。
您可以单击类别
单元格,然后选择一个值(A、B 或 C)。当您从该单元格上移除焦点时,左上角会出现一个小标志,将该单元格标记为脏,要求您保存更改。
在我的模型中,数据项 Bar
的类别为 B
。这意味着加载页面后,人们会期望 Category
的单元格值为 B
,如模板所规定的;
#= (Category != null && Category.Name !== null) ? Category.Name : ' ' #
相反,类别单元格中的文本值始终为空,就好像您点击了三元 if 模板的 else 一样,但事实不应该如此。应该是B
。
但是,如果您单击单元格以显示编辑器,您会注意到 DropDownList 中的所选项目实际上是 B。从单元格中移除焦点,该值会随着 DropDownList 一起消失。
所以就好像编辑器知道所选类别,但网格不知道。
这对你们来说有意义吗?
如果您需要更好的解释、更多代码等,请发表评论。
最佳答案
这很可能是因为编辑器模板要求提供 Category.Name
,但它为空。 DataItems
中的 Category 对象仅定义了 Id
,并且不知道 CategoryOptions
中定义了关系。
在您的编辑器模板中,您可以尝试类似的内容。
#= (Category.Id !== null) ? $.grep(CategoryOptions, function(e){ return e.Id == Category.Id; })[0].Name : ' ' #
基本上,返回 CategoryOptions
中对象的名称,其 Id 与 DataItem
的类别 Id 匹配。
如果尝试不起作用,您可以尝试 column.values
剑道支持的配置。我想它会看起来像这样:
您的类别列(不再有模板):
{
field: "Category",
title: "Category",
editor: categoryDropDownList,
values: CategoryOptions
},
您的数据模型需要如下所示:
{
"DataItems": [
{ "Id": 1, "Name": "Foo", "Category": 1 },
{ "Id": 2, "Name": "Bar", "Category": 2 }
],
"CategoryOptions": [
{ "value": 1, "text": "A" },
{ "value": 2, "text": "B" },
{ "value": 3, "text": "C" }
],
}
<小时/>
向剑道模板上下文添加功能
将包装函数内联声明为编辑器模板的一部分:
"# var GetCategoryNameById = function(id){ return $.grep(CategoryOptions, function(e){ return e.Id == id; })[0].Name; }; # #= GetCategoryNameById (名称)#"
Kendo 模板哈希用法仅供引用:
#= #
--> 渲染为 HTML
# #
--> 任意 JS
关于javascript - 使用自定义 DropDownList 编辑器在 Kendo UI 网格中无法正确显示单元格值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27822565/