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

Posted

技术标签:

【中文标题】在同一级别创建 2 个子剑道网格【英文标题】:Creating 2 child kendo grids at the same level 【发布时间】:2015-04-27 23:24:35 【问题描述】:

我需要为父剑道网格创建 2 个子剑道网格。我知道我可以使用 detailInit 创建一个剑道网格,并继续使用该方法来实现更多层次的层次结构。但我需要解决的问题是将两个子网格作为兄弟。

因此,结构需要如下所示:

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

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

我不知道该怎么做。我在想,我可以有某种带有 2 个 div 的详细模板,并为每个 div 添加一个剑道网格。或者我可以在第一个剑道网格的末尾添加一个虚拟行,并使用该空间与第二个子网格创建一个 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>

【问题讨论】:

你是说你想要像 this 这样的东西,但是有 2 个子网格而不是示例中显示的 1 个子网格? 是的。这就是要求。 【参考方案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 个子剑道网格的主要内容,如果未能解决你的问题,请参考以下文章

在角度控制器中动态创建剑道网格列

剑道 UI 网格冻结列

剑道网格日期格式

剑道网格弹出显示

设置所选页码 - 剑道网格

如何使用列设置动态创建角剑道网格列?