How to collapse other child grid when one more child grid is opened

[Shalini]

I have a grid and i want to expand only one child grid at a time.

Like if one child grid is already opened. on click of one more the previous one has to get collapsed.

How to do it?

[Sathyanarayanamoorthy Eswararao]

Hi Shalini, 

Thanks for contacting Syncfusion support. 

According to your query we suspect that you need to expand only one child grid at a time and all the other child grids need to be in collapsed state. We have achieved your requirement in the below example using detailsExpand event and expandCollapse method of ejGrid. 

Please refer the below code example. 

 

$(function () { 

            var data = ej.DataManager(window.employeeView).executeLocal(ej.Query().take(9)); 

         

            $("#Grid").ejGrid({ 

                dataSource: data, 

                detailsExpand:"expand", 

                columns: [ 

                       { field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 75 }, 

 

                                 …... 

                ], 

                childGrid: { 

                    dataSource: window.gridData, 

                    queryString: "EmployeeID", 

                    allowPaging: true, 

                    columns: [ 

                      { field: "OrderID", headerText: 'Order ID', textAlign: ej.TextAlign.Right, width: 75 }, 

 

                             …... 

                    ], 

                    

                    }, 

            }); 

 

            }); 

       

        function expand(args){ 

            if($("td.e-detailrowexpand").length) 

               this.expandCollapse($("td.e-detailrowexpand"));      

        } 

 

    </script> 

Please refer the below documentation for details of detailsExpand event and expandCollapse method. 

https://help.syncfusion.com/api/js/ejgrid#methods:expandcollapse 

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

We have prepared a online sample which can be referred from the below link. 

Sample: https://jsplayground.syncfusion.com/q3tyg3dw 

If you need any further assistance please get back to us. 

Regards, 

Sathyanarayanamoorthy