在同一级别创建 2 个子 kendo 网格

Question

我需要为父 kendo 网格创建 2 个子 kendo 网格。我知道我可以使用 detailInit 创建一个 kendo 网格，并继续将该方法用于更多级别的层次结构。但是我需要解决的问题是让两个子网格都成为兄弟。

因此，结构需要如下所示：

父网格 1
子网格 1
子网格 2

父网格 2
子网格 1
子网格 2

我不知道该怎么做。我在想，我可以拥有某种带有 2 div 的详细信息模板，并向每个模板添加一个 kendo 网格。或者我可以在第一个 kendo 网格的末尾添加一个虚拟行，并使用那个 space 来创建一个带有第二个子网格的 div，尽管这看起来很疯狂。有人遇到过类似的问题吗？

我试过类似的方法，但似乎不起作用。

    <script id="detail-template">    
    <div id="subgrid1"></div>
    <div id="subgrid2"></div>
</script>
<div id="grid"></div>

    <script>

    $("#grid").kendoGrid({
      columns: [
        { field: "name" },
        { field: "age" }
      ],
      dataSource: [
        { name: "Jane Doe", age: 30 },
        { name: "John Doe", age: 33 }
      ],
      detailTemplate: kendo.template($("#detail-template").html()),

      dataBound: function() {
         $("#subgrid1").kendoGrid({
         columns: [
           { field: "name" },
           { field: "age" }
         ],
         dataSource: [
           { name: "Jane Doe", age: 30 },
           { name: "John Doe", age: 33 }
         ]  
      });  
        $("#subgrid2").kendoGrid({
         columns: [
           { field: "name" },
           { field: "age" }
         ],
         dataSource: [
           { name: "Jane Doe", age: 30 },
           { name: "John Doe", age: 33 }
         ]  
      });  
     }

    });
    </script>

Answer 1

你需要改变两件事：

不要使用 id 查找详细信息网格。 id 必须是全局唯一的，并且每个细节模板中的细节网格都是重复的。请改用 class。

<script id="detail-template">    
  <div class="subgrid1"></div>
  <div class="subgrid2"></div>
</script>

在 detailInit 事件期间初始化详细信息网格而不是 dataBound。后者仅在主网格绑定时触发一次。

  detailInit: function(e) {
      e.detailCell.find(".subgrid1").kendoGrid({
       columns: [
         { field: "name" },
         { field: "age" }
       ],
       dataSource: [
         { name: "Jane Doe", age: 30 },
         { name: "John Doe", age: 33 }
       ]  
    });  

      e.detailCell.find(".subgrid2").kendoGrid({
       columns: [
         { field: "age" },
         { field: "name" }
       ],
       dataSource: [
         { name: "Jane Doe", age: 30 },
         { name: "John Doe", age: 33 }
       ]  
    });  
  },

这里是live working demo.

在同一级别创建 2 个子 kendo 网格

Creating 2 child kendo grids at the same level

html

css

jquery

kendo-ui

kendo-grid