Kendo Grid中ClientTemplate子网格数据绑定失败问题排查

我帮你梳理了代码里的几个核心问题，调整后应该能解决子网格为空的情况：

1. 子网格自动绑定时机错误 #

你当前给子网格设置了.AutoBind(true)，但主网格是通过Ajax异步加载数据的——当ClientTemplate渲染时，#=ID#这个模板变量还没被Kendo解析替换，导致子网格发起请求时OrderID参数是空值，后端拿不到正确参数自然返回空数据。

修改方案：将子网格的.AutoBind(true)改为.AutoBind(false)，关闭自动绑定，等待主网格数据加载完成后手动触发子网格的数据读取。

2. 子网格初始化与数据加载逻辑优化 #

原来的onGridDataBound仅将脚本移到body，这种方式不够可靠。我们需要遍历主网格的每一行，找到对应子网格并传递正确的请求参数：

修改后的CSHTML子网格代码 #

columns.Template(p => "").Title("").ClientTemplate(
    Html.Kendo().Grid<Sales.ProductDetails>()
        .Name("Orders_#=ID#")
        .Columns(c => {
            c.Bound(r => r.Name);
            c.Bound(r => r.Amount);
            c.Bound(r => r.Quantity);
        })
        .AutoBind(false) // 关闭自动绑定
        .DataSource(dataSource1 => dataSource1
            .Ajax()
            .PageSize(200)
            .Read(read1 => read1.Action("GetProductDetails", "Sales", new { area = "Sales" })) // 先不指定OrderID，后续动态传递
        )
        .ToClientTemplate()
        .ToHtmlString()
);

修改后的JavaScript DataBound事件 #

function onGridDataBound(e) {
    var mainGrid = e.sender;
    // 遍历主网格的每一行数据
    mainGrid.tbody.find("tr").each(function() {
        var rowData = mainGrid.dataItem(this);
        var subGridId = "Orders_" + rowData.ID;
        var subGrid = $("#" + subGridId).data("kendoGrid");
        
        if (subGrid) {
            // 给子网格传递正确的OrderID并触发数据读取
            subGrid.dataSource.read({ OrderID: rowData.ID });
        }
    });
}

3. 后端接口参数校验 #

请确认你的GetProductDetails控制器方法能正确接收OrderID参数，示例如下：

public ActionResult GetProductDetails([DataSourceRequest] DataSourceRequest request, int OrderID)
{
    // 根据OrderID查询对应产品详情数据
    var productData = _salesService.GetProductDetailsByOrderId(OrderID);
    return Json(productData.ToDataSourceResult(request));
}

同时要确保主网格返回的ID字段值有效（非空、格式正确），因为子网格的命名依赖这个字段，若ID异常会导致子网格无法被正确找到。

调整后，主网格数据绑定完成时会逐行给对应子网格传递正确的OrderID并触发数据读取，子网格就能正常加载数据了。

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