Hierarchy grid with 2 child grid

[Peter Barasits]

Hi,

How to create hierarchy grid with two child grid (same level)?

I tried to do this but only last child grid working. If commented the last child grid, it's working first child grid.

DataSource architect:

Data (List<T>)

├ Item (string)

├ Child Table 1 (List<T>)

│└ Some data (strings)

└ Child Table 2 (List<T>)

   └ Some data (strings)

And view:

┌─────────────────────────────

│ Row 1

├─────────────────────────────

│┌────────────────────────────

││ChildGrid1

│└────────────────────────────

│┌────────────────────────────

││ChildGrid2

│└────────────────────────────

└─────────────────────────────

┌─────────────────────────────

│ Row 2

├─────────────────────────────

│┌────────────────────────────

││ChildGrid1

│└────────────────────────────

│┌────────────────────────────

││ChildGrid2

│└────────────────────────────

└─────────────────────────────

Etc...

[Thavasianand Sankaranarayanan]

Hi Barasits, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you to render two Grids inside a row. So, we suggest you to use detailTemplate feature of ejGrid control. By using detailsDataBound event of ejGrid control we can render Grid inside a row.  

Refer the below code example. 

@(Html.EJ().Grid<object>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .AllowPaging() 

         .DetailsTemplate("#tabGridContents") 

        .ClientSideEvents(eve => { eve.DetailsDataBound("detailGridData"); }) 

        .Columns(col => 

        { 

            col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 

             

            ----- 

 

        })) 

 

 

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

    <div class="tabcontrol"> 

        <div> 

            <div id="detailGrid"> 

            </div><br /> 

            <div id="seconddetailGrid"> 

            </div> 

        </div> 

    </div> 

</script> 

 

 

<script type="text/javascript"> 

 

    function detailGridData(e) { 

 

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

        // the datasource "window.ordersView" is referred from jsondata.min.js 

        var data = ej.DataManager(window.ordersView).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true)); 

 

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

            dataSource: data, 

            allowSelection: false, 

            columns: [ 

                     

                     ----- 

 

           ] 

        }); 

 

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

            dataSource: data, 

            allowSelection: false, 

            columns: [ 

                     

                    ---- 

 

           ] 

        }); 

 

    } 

</script> 

We have prepared a sample and it can be downloadable from the below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/131880/ze/SyncfusionMvcApplication131936645981.zip 

Refer the help documentation. 

Link: https://help.syncfusion.com/aspnetmvc/grid/row#details-template 

Link: https://help.syncfusion.com/api/js/ejgrid#events:detailsdatabound 

If we misunderstood your query then please get back to us. 

Regards, 

Thavasianand S. 

[Peter Barasits]

Thanks, it's work.

I've modified a bit on the JS code. The data source is already in the parent table, so it does not have to be filtered.

function detailGridData(e) { 

 

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

        // the datasource "window.ordersView" is referred from jsondata.min.js 

        var data = ej.DataManager(window.ordersView e.data.Child1).executeLocal(ej.Query().where("EmployeeID", "equal", parseInt(filteredData), true)); 

[Thavasianand Sankaranarayanan]

Hi Peter, 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

 

Regards, 

Thavasianand S.