Hierarchy Grid with Multiple Child Grids On Same Level

[Chris]

Hi,

I'm trying to create a hierarchy grid that has 2 child grids on the same level.  It only renders the last child grid.  If I take out the last child grid it will render the first child grid.

I found a forum post in the MVC section that describes how you can do this using the "detailTemplate" feature.  Would this also work for ASP.Net Core using Essential JS 1? 

Could I get an ASP.Net Core Essential JS 1 sample?

The forum post I was looking at: https://www.syncfusion.com/forums/131880/hierarchy-grid-with-2-child-grid

To make it more complicated all three of my grids are in "Batch" edit mode using "URLAdaptor".

Thanks,

Chris

[Sathyanarayanamoorthy Eswararao]

Hi Chris, 

Thanks for contacting Syncfusion support. 

As per your requirement we have created a sample with a parent grid and 2 child grid using detailTemplate Feature and Url Adaptor. Please refer the below link for sample. 

Sample: http://www.syncfusion.com/downloads/support/forum/138613/7z/Grid1225524309.7z  

Please refer the below code example. 

<ej-grid id="FlatGrid" allow-sorting="true" allow-multi-sorting="true" allow-paging="true" details-template="#tabGridContents" details-data-bound="detailGridData"> 

    <e-datamanager url="/Home/DataSource" batch-url="/Home/BatchUpdate" adaptor="UrlAdaptor"></e-datamanager> 

    <e-columns> 

        <e-column field="OrderID" header-text="Order ID" text-align="Right" width="75"></e-column> 

        <e-column field="CustomerID" header-text="Customer ID" width="80"></e-column> 

        <e-column field="EmployeeID" header-text="Employee ID" text-align="Left" width="75"></e-column> 

        <e-column field="Freight" header-text="Freight" format="{0:C2}" text-align=Right width="75"></e-column> 

        <e-column field="ShipCity" header-text="Ship City" width="110"></e-column> 

    </e-columns> 

</ej-grid> 

 

 

 

<script id="tabGridContents" type="text/x-jsrender"> 

    <div class="tabcontrol" id="Test"> 

        <ul> 

            <li><a rel='nofollow' href="#gridTab1{{:EmployeeID }}">Child Grid 1</a></li> 

        </ul> 

        <div id="gridTab1{{:EmployeeID }}"> 

            <div id="ChildGrid1"> 

            </div> 

        </div> 

    </div> 

 

    <div class="tabcontrol1" id="Test1"> 

        <ul> 

            <li><a rel='nofollow' href="#gridTab2{{:EmployeeID }}">Child Grid 2</a></li> 

        </ul> 

        <div id="gridTab2{{:EmployeeID }}"> 

            <div id="ChildGrid2"> 

            </div> 

        </div> 

    </div> 

 

</script> 

<script type="text/javascript"> 

    function detailGridData(e) { 

 

        var args = e; 

 

        var filteredData = e.data["EmployeeID"]; 

 

        var dataManager1 = ej.DataManager({ url: "/Home/Child1DataSource", batchUrl: "/Home/BatchUpdate1", adaptor: new ej.UrlAdaptor() }); 

 

        var query1 = new ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true); 

 

        e.detailsElement.find("#ChildGrid1").ejGrid({ 

            dataSource: dataManager1, 

            query: query1, 

            allowPaging: true 

        }); 

 

        var dataManager2 = ej.DataManager({ url: "/Home/Child2DataSource", batchUrl: "/Home/BatchUpdate2", adaptor: new ej.UrlAdaptor() }); 

 

 

        var query2 = new ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true).take(5); 

 

        e.detailsElement.find("#ChildGrid2").ejGrid({ 

            dataSource: dataManager2, 

            query: query2, 

            allowPaging: true 

        }); 

 

 

        e.detailsElement.find(".tabcontrol").ejTab(); 

        e.detailsElement.find(".tabcontrol1").ejTab(); 

    } 

</script> 

Refer the below link for details of detailTemplate feature. 

https://help.syncfusion.com/aspnet-core/grid/row#details-template 

If you need any further assistance please get back to us. 

Regards, 

Sathyanarayanamoorthy 

[Chris]

Thanks!  I've started working on it. 

Chris

[Sathyanarayanamoorthy Eswararao]

Hi Chris, 

Thanks for the update. 

If you need any further assistance please get back to us. We will be happy to assist you. 

Regards, 

Sathyanarayanamoorthy