Is it possible to have a Grid with two child grids?

[Maxwell Sands]

I currently have a grid with a single child grid instance. I would like to add a second child grid instance, I know this is possible because in the docs for Grid it says "Grid supports n level of child grids." yet I cannot find hope to initialize more than one child. How can I do this?

[Joseph Christ Nithin Issack]

Hi Maxwell, 

 

   Greetings from Syncfusion support. 

 

    Based on your requirement, you want to add multiple child grids at the same level. We are not able to add multiple child grids at the same level using the default method as we define the `childGrid` property of the EJ2 Grid as an object of the gridmodel and not as an array of objects. In the document we have mentioned that the grid supports `n` level of child grids, which means we can have multiple level of child grids not multiple child grids in the same level.  

 

    However, we have achieved your requirement using the `detailTemplate` property of the EJ2 grid where we have added two child grid at the same level. 

 

Please find the below code example: 

 

 

[app.component.html] 

 

<div class="control-section"> 

  <ejs-grid 

    #Grid 

    id="Grid" 

    [dataSource]="parentData" 

    (detailDataBound)="detailDataBound($event)" 

  > 

    <ng-template #detailTemplate> 

      <div class="childGrid1"></div> 

      <div class="childGrid2"></div> 

    </ng-template> 

    <e-columns> 

       --------------------------- 

    </e-columns> 

  </ejs-grid> 

</div> 

 

 

[app.component.ts] 

 

detailDataBound(args) { 

    var element1 = args.detailElement.querySelector('.childGrid1'); 

    var child1Data = new DataManager(orderDatas).executeLocal( 

      new Query().where('EmployeeID', 'equal', args.data['EmployeeID']) 

    ); 

    var childGrid1 = new Grid({ 

      dataSource: child1Data, 

      height: 335, 

      width: 'auto', 

      columns: [ 

        { field: 'OrderID', headerText: 'Order ID', width: 110 }, 

        { field: 'CustomerID', headerText: 'Customer ID', width: 110 }, 

        { field: 'OrderDate', headerText: 'Order Date', width: 150 }, 

      ], 

    }); 

    childGrid1.appendTo(element1); 

    var element2 = args.detailElement.querySelector('.childGrid2'); 

    var child2Data = new DataManager(orderDatas).executeLocal( 

      new Query().where('EmployeeID', 'equal', args.data['EmployeeID']) 

    ); 

    var childGrid2 = new Grid({ 

      dataSource: child2Data, 

      height: 335, 

      width: 'auto', 

      columns: [ 

        { field: 'OrderID', headerText: 'Order ID', width: 110 }, 

        { field: 'CustomerID', headerText: 'Customer ID', width: 110 }, 

        { field: 'OrderDate', headerText: 'Order Date', width: 150 }, 

      ], 

    }); 

    childGrid2.appendTo(element2); 

  } 

 

 

 

Sample: https://stackblitz.com/edit/angular-67jjxi?file=app.component.ts 

 

Please get back to us for further details. 

 

Regards, 

Joseph I