title: Creating 2 child kendo grids at the same level
body: <p>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.</p>
  
  <p>So, the structure needs to look something like this:</p>
  
  <p>Parent Grid 1 <br/>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Child Grid 1 <br/>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Child Grid 2<br/></p>
  
  <p>Parent Grid 2<br>
  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Child Grid 1 <br/>
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Child Grid 2<br/></p>
  
  <p>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?</p>
  
  <p>I tried something like this, but doesn't seem to work.</p>
  
  <pre><code>    &lt;script id="detail-template"&gt;    
      &lt;div id="subgrid1"&gt;&lt;/div&gt;
      &lt;div id="subgrid2"&gt;&lt;/div&gt;
  &lt;/script&gt;
  &lt;div id="grid"&gt;&lt;/div&gt;
  
      &lt;script&gt;
  
      $("#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 }
           ]  
        });  
       }
  
      });
      &lt;/script&gt;
  </code></pre>