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。

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

1 个答案: