使用自定义DropDownList编辑器在Kendo UI Grid中无法正确显示单元格值

时间:2015-01-07 15:18:38

标签: javascript kendo-ui kendo-grid

标题可能令人困惑,但我在一句话中解释自己有点麻烦,所以请继续阅读更详细的情节。

我想在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",
        });
}

这似乎按预期工作。

您可以单击Category单元格,然后选择一个值(A,B或C)。从该单元格中删除焦点时,左上角会出现一个小标记,表示该单元格为脏,需要您保存更改。

在我的模型中,数据项Bar的类别为B。这意味着在加载页面时,可以预期Category的单元格值为B,如模板所示;

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

相反,“类别”单元格中的文本值始终为空,就好像您点击三元组的其他模板一样,但情况并非如此。它应该是B

但是,如果单击单元格以显示编辑器,您会注意到DropDownList中的所选项目实际上是B.从单元格中移除焦点,并且该值随DropDownList消失。

所以它好像编辑知道所选类别,但网格没有。

这对你们有意义吗?

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

1 个答案:

答案 0 :(得分:1)

这很可能是因为编辑器模板要求Category.Name,但它是空的。 DataItems中的类别对象只定义了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" }
   ],
}

向kendo模板上下文添加功能

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

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

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

#= # - &gt;呈现为HTML

# # - &gt;任意JS