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

Kendo UI access detail grid instance from widget in its editor

本文关键字：访问 网格 实例 小部 UI 编辑器 Kendo      更新时间：2023-09-26

我有一个剑道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?")
   }
})
}

您可以使用详细网格的edit事件来查找下拉列表，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。

相关文章：