使用自定义 DropDownList 编辑器的 Kendo UI 网格中的单元格值未正确显示

Question

标题可能令人困惑，但我很难用一句话来解释自己，所以请继续阅读以了解更详细的场景。

我正在尝试 Kendo UI DropDownList working correctly when used as an editor in a 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: "&nbsp;"}
    ],
    toolbar: ["save", "cancel"],
    editable: true,
});

您会注意到此网格是 in-line 可编辑的，因此单击一个单元格将允许您编辑其内容。要编辑 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",
        });
}

这似乎符合预期。

您可以单击 Category 单元格，然后 select 一个值（A、B 或 C）。当您从该单元格上移开焦点时，左上角会出现一个小旗帜，将该单元格标记为脏的，要求您保存更改。

在我的模型中，数据项 Bar 具有类别 B。这意味着在加载页面时，人们会期望 Category 的单元格值为 B，如模板所指示的；

#= (Category != null && Category.Name !== null) ? Category.Name : ' ' #

相反，Category 单元格中的文本值始终为空，就好像您点击了三元 if 模板的 else，但事实并非如此。应该是 B.

但是，如果单击单元格以显示编辑器，您会注意到 DropDownList 中 selected 的项目实际上是 B。从单元格上移开焦点，值随 DropDownList 一起消失.

所以就好像编辑器知道 selected 类别，但网格不知道。

这对你们有意义吗？

如果您需要更好的解释、更多代码等，请发表评论

Answer 1

这很可能是因为编辑器模板要求 Category.Name，但它是空的。 DataItems 中的类别对象仅定义了 Id，不知道在 CategoryOptions.

处定义了关系

在您的编辑器模板中，您可以尝试这样（或类似）的操作。

#= (Category.Id !== null) ? $.grep(CategoryOptions, function(e){ return e.Id == Category.Id; })[0].Name : ' ' #

基本上，return 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" }
   ],
}

正在向 kendo 模板上下文添加函数

将包装函数内联声明为编辑器模板的一部分：

"# var GetCategoryNameById = function(id){ return $.grep(CategoryOptions, function(e){ return e.Id == id; })[0].Name; }; # #= GetCategoryNameById(name) #"

Kendo 模板哈希用法仅供参考：

#= # --> 渲染为 HTML

# # --> 任意JS

使用自定义 DropDownList 编辑器的 Kendo UI 网格中的单元格值未正确显示

Cell values not displayed correctly in Kendo UI Grid using custom DropDownList editor

javascript

kendo-ui

kendo-grid