CODEWITHSUNDEEP
jquerycsshtmlkendo-uikendo-grid
AgentHunt
AgentHunt

Reputation: 669

Creating 2 child kendo grids at the same level

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:

Parent Grid 1
     Child Grid 1
     Child Grid 2

Parent Grid 2
     Child Grid 1
     Child Grid 2

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>

Upvotes: 2

Views: 2763

Answers (1)

Atanas Korchev
Atanas Korchev

Reputation: 30671

You need to change two things:

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>

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

Here is a live working demo.

Upvotes: 3

Related Questions