We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Hierarchy grid with 2 child grid

Thread ID:

Created:

Updated:

Platform:

Replies:

131880 Aug 1,2017 09:34 AM Aug 10,2017 11:42 AM ASP.NET MVC 3
loading
Tags: Grid
Peter Barasits
Asked On August 1, 2017 09:34 AM

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 [Syncfusion]
Replied On August 2, 2017 07:23 AM

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. 


Refer the help documentation. 



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

Regards, 
Thavasianand S. 


Peter Barasits
Replied On August 9, 2017 05:29 AM

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 [Syncfusion]
Replied On August 10, 2017 11:42 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;