单元格值未在使用自定义下拉列表编辑器的剑道 UI 网格中正确显示
Cell values not displayed correctly in Kendo UI Grid using custom DropDownList editor
标题可能令人困惑,但我在用一句话解释自己时遇到了一些麻烦,所以请继续阅读以获取更详细的场景。
我正在尝试让剑道 UI 下拉列表在用作剑道 UI 网格中的编辑器时正常工作。
在我看来,我有以下@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。类别选项。
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",
});
}
这似乎按预期工作。
您可以单击Category
单元格,然后选择一个值(A、B 或 C)。从该单元格中删除焦点时,左上角会出现一个小标志,将该单元格标记为脏,要求您保存更改。
在我的模型中,Bar
的数据项具有类别 B
。这意味着在加载页面时,人们会期望Category
的单元格值被B
,由模板指示;
#= (Category != null && Category.Name !== null) ? Category.Name : ' ' #
相反,类别单元格中的文本值始终为空,就像您点击三元 if 模板的其他内容一样,情况并非如此。应该是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 匹配。
如果尝试不起作用,您可以尝试 kendo 支持的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(name) #"
剑道模板哈希用法仅供参考:
#= #
--> 渲染为 HTML
# #
--> 任意 JS
- 我可以更改剑道UI网格吗's的外键值
- 如何在Angular UI网格中选择下一行
- 使用导航属性创建Kendo UI网格模型的问题
- ui网格将单元格显示为选择标记
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 使用按钮的Angular UI网格过滤器
- ui网格:在自定义表头模板中触发排序
- 在有角度的ui网格中设置动态列的问题
- angularjs中的ng网格和ui网格有什么区别
- 在编辑内联模式下禁用Kendo Ui网格按钮
- 在angularjs UI网格列中选择下拉菜单不适用于外部editcellTemplate
- 将模型从Kendo Mvc UI网格传递到javascript函数
- 如何在可扩展ui网格中绑定子网格事件
- Typescript Kendo UI网格列类型错误
- ui网格如何在单击行时选中复选框
- Kendo UI网格:数据源刷新后,我丢失了分页
- Kendo UI网格复选框列字段未定义
- 无法将行保存在Angular UI网格中的可展开行中
- Angular UI网格:如何通过第一个UI网格中的按钮使第二个UI网格可见
- Kendo UI网格自定义编辑按钮