kendo-ui - Kendo Grid - 单击模板化列时的编辑模式

Question

我正在使用编辑弹出窗口的模板。我试图强制网格进入编辑模式，并在单击其中一列中的链接时显示编辑模板弹出窗口。

我尝试使用命令，但无法将超链接的文本数据绑定(bind)到模型中声明的字段，在本例中为“CourseType”。 命令 列中是否支持数据绑定(bind)？

columns: [
     { 
        command: [
          { 
            id: "edit", 
            title: "School Item",    
            template: '<a href="\\#">#=CourseType#</a>',  
            width: 120
          }
       ]
     }
]

如果命令列不支持数据绑定(bind)，那么如何在单击模板化字段时将网格置于编辑模式？

columns: [
  { 
    field: "CourseType", 
    title: "School Item",  
    template: '<a href="\\#">#=CourseType#</a>'
  }
]

Answer 1

我不确定为什么要将单元格定义为 HTML anchor，但是在单击 anchor 时使其进入弹出编辑模式没有问题。

1) 在您的模板中添加一个类，使我们能够找到这些单元格。像这样的东西:

columns: [
    {
        field: "CourseType",
        title: "School Item",
        template: '<a href="\\#" class="ob-edit-popup">#=CourseType#</a>'
    }
]

我在模板中包含 class="ob-edit-popup"。

2) 在您的网格定义中添加选项 editable: "popup"。

3) 初始化后添加如下JavaScript代码。

$(".ob-edit-popup", grid.tbody).on("click", function (e) {
    var row = $(this).closest("tr");
    grid.editRow(row);
})

grid 的结果是:

var grid = $("#grid").kendoGrid({...}).data("kendoGrid");