javascript - Kendo UI 从其编辑器中的小部件访问详细网格实例

Question

我有一个 Kendo UI 网格，以及一个嵌套在父网格中的子网格。当我对子网格进行弹出编辑并选择一个下拉列表作为其字段之一时，我想从此下拉列表访问当前正在编辑的子网格的实例。

向子网格提供 id 显然是不可行的(因为所有子网格都会获得相同的 id)，例如我不能做最直接的事情:

var childGrid = $("#myChildGridCurrentlyEdited").data("kendoGrid");

我想要获取的是当前编辑的子网格中的可观察数组，以检查它有哪些元素。我将不胜感激的帮助，最好检查这里的 jsFiddle，代码启动 childGrid 及其编辑器，以便快速查看。

https://jsfiddle.net/Turo/7a0LLrdf/1/

<小时/>

function initDetail(e) {
  $("<div/>").appendTo(e.detailCell).kendoGrid({
    dataSource: [{gender: "male",height: "2m", ageEdit: {Id: 1, Age: 40}}, 
    {gender: "female",height: "1.6m", ageEdit: {Id: 2, Age: 50}}],
    columns: [
    {field: "gender"}, 
    { field: "height"},
    {field:"ageEdit", template: "#= ageEdit.Age #", editor: editAge},
    {command: ["edit"]}],
    editable: {mode: "popup"}
  })
}

function editAge(container, options){
    $('<input required name="ageEdit"/>')
    .appendTo(container)
    .kendoDropDownList({
    dataTextField: "Age", 
    dataValueField: "Id",
   dataSource: [{Id: 1, Age: 20}, {Id: 2, Age: 30}],
   select: function(e){
        alert("how do I get to the detail grid instance from here?")
   }
})
}

Answer 1

您可以使用详细网格的 edit事件至 find the DropDownList和 bind它的select处理程序:

edit: function(arg) { 
    arg.container
        .find("[name=ageEdit]").data("kendoDropDownList").bind("select", function(j) {
            var detailGrid = arg.sender;
});

顺便说一句，要将 ID 设置为详细信息网格，请使用相应主行的 ID 值，该值可在 detailInit 中找到。事件例如:

$("<div id='detail-grid-" + e.data.id + "'></div>").appendTo()...

主网格必须具有 dataSource.schema.model.id 中定义的 ID 字段要使 e.data.id 正常工作，否则您应该使用 ID 字段名称而不是 id。