1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Child Grid

Child Grid

Hi support i would like to know if it's possible to have in JS2 the child grid like the JS1

Thanks in advance
Stefano Capobianco

9 Replies
DR Dhivya Rajendran Syncfusion Team April 13, 2018 08:29 AM UTC

Hi Stefano, 

Thanks for contacting Syncfusion support. 

Query: it's possible to have in JS2 the child grid like the JS1? 
 
Yes, you can use Hierarchical Grid feature in EJ2-Grid to render parent child relationship grid. We have created a sample for your reference, we don’t have support for inner Grid tag in ASP.NET Core so we suggest you to render the child grid in load event. Kindly refer to the below sample and code example for more information. 
 
<div> 
        <ejs-grid id="Grid" allowPaging=true load='load'> 
            <e-datamanager url='http://js.syncfusion.com/demos/ejservices//Wcf/Northwind.svc/Employees/' adaptor="ODataAdaptor" crossdomain="true"></e-datamanager> 
            <e-grid-columns> 
                <e-grid-column field="EmployeeID" headerText="Employee ID" width="110"></e-grid-column> 
            . . . . . 
            </e-grid-columns> 
        </ejs-grid> 
    </div> 
    
<script> 
     function load(args) {   
        this.childGrid = { 
            dataSource: new ej.data.DataManager({ 
                adaptor: new ej.data.ODataAdaptor(), 
                crossDomain: true 
            }), 
            queryString: 'EmployeeID', 
            allowPaging: true, 
            pageSettings: {pageSize: 5}, 
            columns: [ 
                { field: 'OrderID', headerText: 'Order ID', width: 120 }, 
                . . . . . 
            ], 
        }; 
    } 
</script> 
 
 
 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
R.Dhivya 


DI Diego July 19, 2018 04:11 PM UTC

Hi, im trying to accomplish something similar. by showing child records without the need to open each row, and the data from teh datasource. not doing a query to external services

RN Rahul Narayanasamy Syncfusion Team July 20, 2018 01:37 PM UTC

Hi Diego, 
 
Query: By showing child records without the need to open each row, and the data from the datasource. not doing a query to external services. 
 
From the query we understood that you want to bind child grid with the data source from the parent grid and expand the child grid initially. You can show child grid records at initial rendering of grid by using dataBound event and expandAll method. We have to create the child grid by using parent grid data source. Please find the below code example for your reference. 
 
[code example] [index.cshtml] 
<div class="container"> 
        <ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowPaging=true load="load" dataBound="dataBound"> 
            <e-grid-columns> 
                <e-grid-column field="OrderID" headerText="Order ID" width="110"></e-grid-column> 
                <e-grid-column field="CustomerID" headerText="Customer ID" width="110"></e-grid-column> 
            </e-grid-columns> 
        </ejs-grid> 
    </div> 
 
<script> 
    function dataBound(args) { 
        document.getElementById("Grid").ej2_instances[0].detailRowModule.expandAll();   // expand child grid at initial rendering 
    } 
</script> 
 
Here, we created the child grid data(value of the Details property from parent) within the parent grid datasource(list). 
[HomeController] 
public IActionResult Index() 
        { 
            var dataSource = new List<OrdersDetails>() { 
                   new OrdersDetails() { OrderID = 1, CustomerID = "VINET", Details = new List<Details>() { 
                       new Details(){ ShipCountry = "IND", ShipName = "BlackPearl" }, 
                       new Details(){ ShipCountry = "BAN", ShipName = "DarkWorld" } 
                   } 
                   }, 
                   new OrdersDetails() { OrderID = 2, CustomerID = "VINET", Details = new List<Details>() { 
                       new Details(){ ShipCountry = "IND", ShipName = "BlackPearl" }, 
                       new Details(){ ShipCountry = "USA", ShipName = "WhiteField" }, 
                       new Details(){ ShipCountry = "FDA", ShipName = "IdeaWorld" } 
                   } 
                   } 
            }; 
            ViewBag.DataSource = dataSource; 
            return View(); 
        } 
 
[index.cshtml] 
<div class="container"> 
        <ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowPaging=true load="load" dataBound="dataBound"> 
            <e-grid-columns> 
                <e-grid-column field="OrderID" headerText="Order ID" width="110"></e-grid-column> 
                <e-grid-column field="CustomerID" headerText="Customer ID" width="110"></e-grid-column> 
            </e-grid-columns> 
        </ejs-grid> 
    </div> 
    
<script> 
     function load(args) {   
           
        this.childGrid = { 
            dataSource: null, 
            allowPaging: true, 
            pageSettings: {pageSize: 5}, 
            columns: [ 
                { field: 'ShipCountry', headerText: 'Ship Country', textAlign: 'Right', width: 120 }, 
                { field: 'ShipName', headerText: 'Ship Name', width: 150 } 
            ], 
            created: create 
        }; 
    } 
     
</script> 
 
<script> 
    function create() { 
        this.dataSource = this.parentDetails.parentRowData.Details;            
        this.query = new ej.data.Query();                              // render child grid data 
    } 
</script> 
 
We have prepared a simple sample based on your requirement. Please find the sample in the below link. 
 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Rahul Narayanasamy. 


DI Diego July 21, 2018 03:43 PM UTC

Hi Rahul, you understood what i wanted perfectly, but its not scaling to 208 Rows with at least 2 child elements. the browser gets locked for like 1 min.
Maybe not using netcore, just passing the json to it to make it render all at once with react or js. 

also if i try to print i dont see the expanded data

hope you can help!


DR Dhivya Rajendran Syncfusion Team July 23, 2018 11:18 AM UTC

Hi Diego, 
Thanks for your update. 

We have validated your query and we suspect that the reported problem has been occurred because of loading the large amount of data’s(203) in single page grid. So we suggest you to enable paging [display grid data in page segments] feature in Grid to resolve your problem. 

Kindly refer to the below code example and documentation for more information. 

<div class="container"> 
    <ejs-grid id="Grid" dataSource=@ViewBag.DataSource allowPaging=true load="load" toolbar="@(new List<string>() { "Print"})" dataBound="dataBound"> 
        <e-grid-columns> 
            <e-grid-column field="OrderID" headerText="Order ID" width="110"></e-grid-column> 
            <e-grid-column field="CustomerID" headerText="Customer ID" width="110"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
  

Query : if i try to print i dont see the expanded data  

We have analyzed your requirement, currently we don’t have support for printing expanded items. Already we have added “Provide support for printing with hierarchy grid” to our feature list and logged the report for the same. The feature will be available in any of our upcoming release. 

Regards,
R.Dhivya 


DI Diego July 23, 2018 11:41 AM UTC

Thanks for the reply. i will  have to go with a standard loop and a table. since im required to present all the data in 1 page and be able to print it :(. I will loose all the functionality of the grid, but the 1st request i have its to return all the data in 1 view with hierarchy, i really dont care about the on demand expansion. Im using something like this

http://mvc6-grid.azurewebsites.net/Grid/Partial

If its posible to doit with other of the componentes or even other of the js formats (js/react/angular) let me know. Thanks for the support!

diego

DR Dhivya Rajendran Syncfusion Team July 25, 2018 01:09 PM UTC

Hi Diego, 
Thanks for your update. 

We have added “Provide support for printing with hierarchy grid” to our feature request list and the feature will be available in any of our upcoming release. We have tried to achieve this by workaround(custom level) but its unsuccessful.  

Regards,
R.Dhivya 


DI Diego July 25, 2018 02:07 PM UTC

Thank You!

DR Dhivya Rajendran Syncfusion Team July 26, 2018 07:36 AM UTC

Hi Diego,

 
Most Welcome. 

Please get back to us if you require further assistance from us. 

Regards,
R.Dhivya 


Loader.
Up arrow icon