Render a datagrid inside a datagrid.

[David]

Is it possible to render a datagrid inside of a datagrid? The DataSource I use on the main grid contains a list of items. I am able to render a regular table inside my datagrid rows using the detailtemplate like this:

<script type="text/x-template" id="detailtemplate">

        <table  class="table table-sm table-hover" width="100%">

            <thead class="thead-dark">

                <tr>

                    <th>header1r</th>

                    <th>header2</th>

                    <th>header3</th>

                </tr>

            </thead>

            <tbody>

                ${for(item of Items)}

                <tr>

                    <td>${item.Prop1}</td>

                    <td>${item.Prop2}</td>

                    <td>${item.Prop3}</td>

                </tr>

                ${/for}

            </tbody>

        </table>

    </test>

</script>

That does the trick, but some of my rows contains many items inthe detailtemplate so I wold like a datagrid with paging instead of a regular table. 

[Praveenkumar Gajendiran]

Hi David,

Greetings from Syncfusion support.

We checked your query. Based on that you want to render DataGrid inside the DataGrid with pagination feature. For this we suggest you to use the hierarchical binding of the Grid component.

The Hierarchy Grid is used to display the table data in hierarchical structure which can show or hide by clicking on expand or collapse button. This feature can be enabled by defining childGrid and childGrid.queryString.

Please refer the below code example and sample for more information.

Code Example: 

@{ 

    var data = ViewBag.DataSource2; 

 

    var ChildGrid = new Syncfusion.EJ2.Grids.Grid()      // Child Grid  

    { 

        DataSource = data, 

        QueryString = "EmployeeID",        

        AllowPaging = true,                //enable pagination 

        Columns = new List<Syncfusion.EJ2.Grids.GridColumn> { 

    new Syncfusion.EJ2.Grids.GridColumn(){ Field="UnitID", IsPrimaryKey=true, HeaderText="Unit ID", Width="150" }, 

new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" }, 

new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipAddress", HeaderText="Ship Address", Width="120" }, 

} 

    }; 

} 

 

<div class="control-section"> 

    <ejs-grid id="HierarchyPrint" dataSource="ViewBag.DataSource1" allowPaging="true" childGrid="ChildGrid">  //Parent Grid 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="125"></e-grid-column> 

            <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column> 

            <e-grid-column field="Freight" headerText="Freight" width="170"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

Screenshot: 

 

Sample: https://www.syncfusion.com/downloads/support/forum/160129/ze/WebApplication7_249471cb-1989493808.zip

API Link: https://ej2.syncfusion.com/javascript/documentation/api/grid/#childgrid
                https://ej2.syncfusion.com/javascript/documentation/api/grid/#querystring

If this is not meet your requirement, could you please explain/elaborate more details about your requirement.

Regards,
Praveenkumar G 

[David]

Oh nice, that is exactly what I need. Thanks!

[Praveenkumar Gajendiran]

Hi David, 

You are welcome. We glad that the provided solution resolved your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Praveenkumar G 

[David]

Is it possible to get the datasource of the childGrid dynamicaly from the controller, using a field (like ItemId) from the record that was clicked in the parent grid?

[Shalini Maragathavel]

Hi David, 

Thanks for your update.

Based on your query we suspect that you want get the dataSource for the childGrid fields dynamically. By default in EJ2 Grid when we click the expand icon the entire child Grid will be created.  

So, before proceeding further please share us the following information to understand your requirement better, 

• Do you wish to create individual ID’s for the childGrid fields since, you want get the dataSource for the childGrid fields dynamically.  
• Elaborate on the requirement.
• Share us a pictorial representation of the requirement.
• Grid code file.

Note:By default, the child Grid will be rendered through the Query string and each query string should be Unique.

Let us know if you have any concerns. 

Regards, 

Shalini M.