Multiple child grid elements
Hi Bryan,
Greetings from Syncfusion support
After reviewing the information you provided, it appears that two childGrid definitions have been specified for a single Grid. We would like to clarify that if an object contains duplicate keys, the last defined key takes precedence. This occurs because, in JavaScript, properties with the same key are overwritten during object creation. This behavior is inherent to JavaScript. Please refer to the screenshot below for further clarification.
By default, the EJ2 Grid allows defining a single childGrid configuration for the parent Grid. Within this childGrid configuration, you can specify a nested childGrid to display the Grid in a hierarchical structure. For more details, please refer to the code example and documentation below.
|
var detailtwo = new ej.grids.Grid({ dataSource: childtwo, childGrid: { queryString: 'Id', dataSource: childthree, //inside the childGrid definition you can define the nested childGrid to display the Grid in hierarchy structure childGrid: { dataSource: childfour, queryString: 'Id' } }
}); |
Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/hierarchy-grid
If you would like to display two childGrids separately within a parent Grid instead of using a hierarchical structure, we recommend using the detailTemplate feature to achieve this. For your convenience, we have prepared a sample based on the information you provided, which demonstrates how to display the two Grids using the detailTemplate feature. Please refer to the code example and sample below for further details.
|
Index.cshtml
<script id='detailtemplate' type="text/x-template"> <div id="childGrids"> <div class="e-tab-header"> <div>Severity Base Selections</div> <div>Filters </div> </div> <div class="e-content"> <div> <div class="detalleSeverity"></div> </div> <div> <div class="detalleFiltros"></div> </div> </div> </div> </script>
<script id='displaytwoGrids' type="text/x-template"> <div class='custom-gridone'></div> <div class='custom-gridtwo'></div> </script>
<script>
function detailDataBound(e) { var childone = @Html.Raw(Json.Serialize(ViewBag.child)); var childtwo = @Html.Raw(Json.Serialize(ViewBag.childtwo)); var childthree = @Html.Raw(Json.Serialize(ViewBag.childthree)); var childfour = @Html.Raw(Json.Serialize(ViewBag.childfour));
var detailone = new ej.grids.Grid({ dataSource: childone, columns: [ { field: 'OrderID', headerText: 'Order ID', width: 110 }, { field: 'EmployeeID', headerText: 'Employee ID', width: 140 }, { field: 'FirstName', headerText: 'First Name', width: 140 }, ] }); detailone.appendTo(e.detailElement.querySelector('.detalleSeverity'));
var detailtwo = new ej.grids.Grid({ dataSource: childtwo, detailTemplate: '#displaytwoGrids', detailDataBound: displaytwoGriddetaildataBound
}); detailtwo.appendTo(e.detailElement.querySelector('.detalleFiltros'));
function displaytwoGriddetaildataBound(args) { var detailChildone = new ej.grids.Grid({ dataSource: childthree
}); detailChildone.appendTo(e.detailElement.querySelector('.custom-gridone'));
var detailChildtwo = new ej.grids.Grid({ dataSource: childfour
}); detailChildtwo.appendTo(e.detailElement.querySelector('.custom-gridtwo')); }
var tabObj = new ej.navigations.Tab({
heightAdjustMode: ""
});
tabObj.appendTo('#childGrids'); } </script> |
Note: The code above which was highlighted in bold is used to render two grids within a detailTemplate inside the FILTERS tab.
Sample: Check the attachment.
Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/row/detail-template#rendering-custom-component
Screenshot:
Regards,
Vasanthakumar K
Attachment: 664432,195451sample_5901879c.zip
