如何在Kendo Grid详情行中正确显示额外模板信息

AI 小北

2026-8-12

问题描述

我使用的Kendo Grid「detailTemplate」与官方示例几乎一致，点击展开图标时会获取数据并显示子网格，这部分功能运行正常。现在需要在子网格旁展示不属于网格的额外信息，当前实现的伪代码如下：

<script id="template-details">
  <div class="myDetailGrid"></div>
  <div id="additionalInfoTemplate"></div>
</script>

detailRow.find(".myDetailGrid").kendoGrid({
 dataSource: {
    transport: {
            read: function(options) {
                axios.post(myUrlString, payloadContent).then(function (response) {
                    options.success(response.data.orders);

                    var templateString = `<div>#: additionalInfo1 #</div><div>#: additionalInfo2 #</div> ....`
                    var template = kendo.template(templateString);
                    var result = template(response.data.additionalInfo);
                    $("#additionalInfoTemplate").html(result); 
                })
            // 省略其他配置
            }
        }
        // 省略其他配置

实际运行遇到的问题：

父网格显示正常
点击展开图标时，子网格始终显示正常
首次展开的详情行额外信息显示正常
后续展开其他详情行时，子网格内容正确，但额外信息要么显示之前行的内容，要么为空

解决办法

问题核心是ID选择器的唯一性冲突：
每个展开的详情行都会生成一个id="additionalInfoTemplate"的元素，但ID在页面中必须唯一，使用$("#additionalInfoTemplate")全局选择时，只会匹配页面中第一个该ID的元素，导致后续展开的行无法更新对应位置的额外信息容器。

具体修正步骤：

修改详情模板，将ID选择器改为类选择器：

<script id="template-details">
  <div class="myDetailGrid"></div>
  <div class="additionalInfoTemplate"></div>
</script>

在数据加载的回调中，基于当前展开的详情行（而非全局）查找对应的额外信息容器：

detailRow.find(".myDetailGrid").kendoGrid({
 dataSource: {
    transport: {
            read: function(options) {
                // 提前保存当前详情行的引用，避免回调上下文丢失
                const currentDetailRow = detailRow;
                axios.post(myUrlString, payloadContent).then(function (response) {
                    options.success(response.data.orders);

                    var templateString = `<div>#: additionalInfo1 #</div><div>#: additionalInfo2 #</div> ....`
                    var template = kendo.template(templateString);
                    var result = template(response.data.additionalInfo);
                    // 基于当前详情行定位对应的额外信息容器
                    currentDetailRow.find(".additionalInfoTemplate").html(result); 
                })
            // 省略其他配置
            }
        }
        // 省略其他配置

额外提示：如果detailRow在axios的异步回调中会出现上下文丢失的情况，一定要提前将它的引用保存到变量中（如示例中的currentDetailRow），确保能精准定位到当前展开行的容器。

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