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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Hierarchy grid with 2 child grid

Thread ID:

Created:

Updated:

Platform:

Replies:

131880 Aug 1,2017 01:34 PM UTC Aug 10,2017 03:42 PM UTC ASP.NET MVC 3
loading
Tags: Grid
Peter Barasits
Asked On August 1, 2017 01:34 PM UTC

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 11:23 AM UTC

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 09:29 AM UTC

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 03:42 PM UTC

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.

Warning Icon 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.Close Icon

;