Kendo UI层级网格与主网格编辑后出现重复刷新循环问题求助

我刚仔细梳理了你的问题场景——主网格和明细层级网格都开启了可编辑且batch=true，每次编辑明细网格时，刷新次数会逐次递增，这确实是Kendo UI层级网格在batch模式下常见的事件订阅循环问题，我来帮你拆解原因并给出解决方案：

问题根源 #

当你在batch模式下编辑明细网格时，每次编辑操作会触发明细数据源的change事件，这个事件会向上传播触发主网格的数据源同步，进而导致主网格刷新；主网格刷新又会重新调用detailInit初始化明细网格，而每次初始化都会重新绑定编辑相关的事件（比如save、change），相当于每次刷新都多了一层事件订阅，最终导致刷新次数逐次叠加，形成循环。

解决方案 #

1. 确保明细网格只初始化一次 #

在detailInit回调中，给已初始化的明细行添加标记，避免主网格刷新时重复创建明细网格实例：

function detailInit(e) {
    // 检查当前行是否已初始化过明细网格
    const hasInitialized = e.detailRow.data("grid-initialized");
    if (!hasInitialized) {
        e.detailRow.kendoGrid({
            dataSource: {
                data: e.data.details,
                batch: true,
                schema: {
                    model: {
                        fields: {
                            id: { editable: false, nullable: true },
                            name: { validation: { required: true } }
                        }
                    }
                }
            },
            editable: true,
            columns: [
                { field: "id", title: "ID" },
                { field: "name", title: "Name" },
                { command: "destroy", title: " ", width: "150px" }
            ],
            save: handleDetailSave
        });
        // 标记当前行已完成初始化
        e.detailRow.data("grid-initialized", true);
    }
}

2. 控制事件传播，避免不必要的主网格刷新 #

在明细网格的save事件中，阻止默认的事件传播，手动控制数据源同步和主数据更新，而不是让主网格整体刷新：

function handleDetailSave(e) {
    // 阻止默认的change事件向上传播，避免触发主网格刷新
    e.preventDefault();
    
    // 同步明细数据源的变更
    this.dataSource.sync();
    
    // 直接更新主网格对应的数据源项，而非刷新整个主网格
    const masterItem = e.sender.options.parentDataItem;
    masterItem.set("details", this.dataSource.data().toJSON());
}

3. 优化主网格的数据源配置 #

确保主网格的数据源不会因为明细数据的变更而自动触发整体刷新，可以在主数据源中设置autoSync: false，手动控制同步时机：

$("#masterGrid").kendoGrid({
    dataSource: {
        data: masterData,
        batch: true,
        autoSync: false, // 关闭自动同步，避免不必要的刷新
        schema: {
            model: {
                fields: {
                    id: { editable: false, nullable: true },
                    title: { validation: { required: true } }
                }
            }
        }
    },
    // 其他配置...
    detailInit: detailInit
});

通过以上调整，就能彻底解决每次编辑后刷新次数递增的循环问题，同时保证编辑功能正常工作。

内容的提问来源于stack exchange，提问作者Wasim