层级Kendo Grid子Grid高度调整异常：首次点击展开无效果

• 场景：父网格嵌套子网格的层级结构，需调整子网格高度
• 问题：点击展开按钮调整高度的代码仅在第二次点击时生效，首次点击无法识别子网格（展开按钮如附图红圈标注）

用户编写的问题代码：

// The code inside the databound function of master grid
$("#SiparisListeleGrid td a.k-icon").click(function () { // onclick for a element that opens second grid inside the row
    if ($(this).hasClass("k-i-expand")) { // if the grid is expand

        // uid of tr element
        var tr_UID = $(this).parents("tr").data("uid");

        // master grid
        var ustGrid = $("#SiparisListeleGrid").data("kendoGrid");

        $(ustGrid.dataSource.data()).each(function (i, item) {
            if (item.uid == tr_UID) {
                var altGrid = $("#Grid_SiparisSatir_" + item.SipUstID).data("kendoGrid");
                var rowCount = altGrid.dataSource.view().length;

                $("#Grid_SiparisSatir_" + item.SipUstID).attr("style", "height:" + (rowCount * 40 + 125) + "px;");

                $("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content").css("height", (rowCount * 40));

                $("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content-locked").css("height", (rowCount * 40));
            }
        });
    }
});
// This code block only works on second clicking the expan button.
// Does not recognize the second grid when clicked for the firs time
// Should I use databound for second grid? However I do not know how can I do that.

问题原因 #

首次点击展开按钮时，子网格还未完成渲染与初始化，直接获取kendoGrid实例会返回undefined，导致代码无执行效果；第二次点击时子网格已存在，因此能正常运行。

解决方法：绑定子网格dataBound事件 #

这是最可靠的方案，无需在父网格点击事件中直接操作子网格，而是在子网格初始化时绑定dataBound事件，在回调中完成高度调整：

1. 修改子网格初始化逻辑，添加dataBound事件

// 父网格展开时初始化子网格的函数
function initChildGrid(e) {
    $(e.detailCell).find("#Grid_SiparisSatir_" + e.data.SipUstID).kendoGrid({
        // 子网格原有配置（数据源、列定义等）
        dataBound: function() {
            adjustChildGridHeight(this);
        }
    });
}

2. 编写通用高度调整函数

function adjustChildGridHeight(grid) {
    var rowCount = grid.dataSource.view().length;
    var gridElement = grid.element;
    
    // 调整网格整体高度
    gridElement.css("height", (rowCount * 40 + 125) + "px");
    // 调整滚动内容区高度
    gridElement.find(".k-grid-content").css("height", rowCount * 40 + "px");
    gridElement.find(".k-grid-content-locked").css("height", rowCount * 40 + "px");
}

3. 关联父网格的展开事件
   确保父网格展开时触发子网格初始化：

$("#SiparisListeleGrid").kendoGrid({
    // 父网格原有配置
    detailExpand: function(e) {
        initChildGrid(e);
    }
});

替代方案：延迟执行（可靠性略低） #

如果无法修改子网格初始化逻辑，可以在父网格点击事件中添加延迟，等待子网格渲染完成后再执行高度调整：

$("#SiparisListeleGrid td a.k-icon").click(function () {
    if ($(this).hasClass("k-i-expand")) {
        var tr_UID = $(this).parents("tr").data("uid");
        var ustGrid = $("#SiparisListeleGrid").data("kendoGrid");
        
        // 延迟等待子网格渲染，时间可根据实际情况调整
        setTimeout(function() {
            $(ustGrid.dataSource.data()).each(function (i, item) {
                if (item.uid == tr_UID) {
                    var altGrid = $("#Grid_SiparisSatir_" + item.SipUstID).data("kendoGrid");
                    if (altGrid) { // 确保子网格实例已存在
                        var rowCount = altGrid.dataSource.view().length;
                        $("#Grid_SiparisSatir_" + item.SipUstID).css("height", (rowCount * 40 + 125) + "px");
                        $("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content").css("height", rowCount * 40 + "px");
                        $("#Grid_SiparisSatir_" + item.SipUstID + " .k-grid-content-locked").css("height", rowCount * 40 + "px");
                    }
                }
            });
        }, 200);
    }
});

内容的提问来源于stack exchange，提问作者Omer Faruk OZKAN