在同一级别创建2个子剑道网格 [英] Creating 2 child kendo grids at the same level

问题描述

我需要为父剑道网格创建2个子剑道网格.我知道我可以使用detailInit创建一个剑道网格，并继续使用该方法进行更高层次的层次化.但是我需要解决的问题是将两个子网格都作为同级.

I have a requirement to create 2 child kendo grids for a parent kendo grid. I know I can create one kendo grid using the detailInit and keep using that method for more levels of hierarchy. But the problem I need to solve is to have both the child grids as siblings.

因此，结构需要看起来像这样:

So, the structure needs to look something like this:

父网格1
     Child Grid 1
     Child Grid 2

Parent Grid 1
     Child Grid 1
     Child Grid 2

父网格2
     Child Grid 1
     Child Grid 2

Parent Grid 2
     Child Grid 1
     Child Grid 2

我不确定该怎么做.我在想，我可以使用某种带有2个div的详细信息模板，并向每个模型添加一个kendo网格.或者，我可以在第一个剑道网格的末尾添加一个虚拟行，并使用该空间与第二个子网格创建div，即使这看起来很疯狂. 有人遇到过类似的问题吗?

I am not sure how to go about that. I am thinking, I can have some kind of a detail template with 2 divs and add one kendo grid to each. Or I could add a dummy row at the end of the 1st kendo grid and use that space for creating a div with the 2nd child grid even though this seems crazy. Has anyone faced a similar issue?

我尝试了类似的方法，但是似乎没有用.

I tried something like this, but doesn't seem to work.

    <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>

推荐答案

您需要更改两件事:

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

Don't use id to find the detail grids. An id must be globally unique and detail grids are duplicated in every detail template. Use class instead.

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

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

Initialize the detail grids during the detailInit event instead of dataBound. The latter is fired only once - when the master grid is bound.

  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 }
       ]  
    });  
  },

这是一个在线工作演示.

这篇关于在同一级别创建2个子剑道网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！