Child Grid

[Aaron Khan]

Is it possible to make the child grid of a grid so its showing on load?

[Pavithra Subramaniyam]

Hi Aaron, 

You can show the Child Grids on loading of the Parent grid by using gridObj.detailRowModule.expandAll() method of grid component. In created event you can show all the Child Grid or a particular Child Grid. We have prepared a sample. Please refer to the below code example and Sample link.  

 

[index.chtml]  

//Parent Grid  

  @Html.EJS().Grid("Grid").DataSource(dataManger => 

{    dataManger.Url("http://js.syncfusion.com/demos/ejservices//Wcf/Northwind.svc/Employees/").CrossDomain(true).Adaptor("ODataAdaptor"); 

}).Width("auto").Columns(col => 

   { 

    .  .   . 

 

   }).Load("load").DataBound("created").Render() 

</div> 

    

    <script> 

        var data = new ej.data.DataManager({ 

            url: 'https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders', 

            adaptor: new ej.data.ODataAdaptor, 

            crossDomain: true 

        }); 

        function load(args) { 

            var grid = document.getElementById('Grid').ej2_instances[0] 

            grid.childGrid = { 

                dataSource: data, 

                queryString: 'EmployeeID', 

                .   .   . 

           } 

        } 

        function created(args) { 

            var grid = document.getElementById('Grid').ej2_instances[0] 

            grid.detailRowModule.expandAll();   //for particular Child use expand() method 

        } 

    </script> 

 

Documentation: https://ej2.syncfusion.com/16.1.37/documentation/grid/api-detailRow.html?lang=typescript  

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/Child_Grid827232868  

Regards,  

Pavithra S.