How to expand 3 levels Hierarchical grid

[Ignacio]

Hi,
I'm using a Hierarchical grid with 3 levels (2 child grids one inside the other). I want to expand all the grids, I tried with $("#Grid").ejGrid("expandAll")  but it only expand the main grid and the child. What can i do to expand all the grids?

http://jsplayground.syncfusion.com/m3jaa3bv

Thanks!

[Seeni Sakthi Kumar Seeni Raj]

Hi Ignacio, 

We could see you have called the expandAll method using the parent Grid’s instance (#Grid) which will expand the immediate child Grid of the parent Grid(#Grid) and not its successive Grids. To expand the successive Child Grids , you have to call the expandAll method after rendering the child Grid content i.e. in the dataBound event. Refer to the following code example. 

<div id="Grid"></div> 

 

$(function () { 

    $("#Grid").ejGrid({ 

        dataSource: data, 

        allowSorting: true, 

        dataBound: function(args){ 

            this.expandAll(); 

        }, 

                  . ..  

        childGrid: { 

            dataSource: window.gridData, 

            queryString: "EmployeeID", 

            allowPaging: true, 

            dataBound: function(args){ 

                this.expandAll(); 

            }, 

              . ..  

            childGrid: { 

                dataSource: window.ordersView, 

                queryString: "CustomerID", 

                 . . .  

            }, 

        }, 

    }); 

           

}); 

Refer to the following sample. 

http://jsplayground.syncfusion.com/4l2qfq3l 

Regards, 

Seeni Sakthi Kumar S. 

[Ignacio]

Thanks. It's not working in my case i think because i'm setting the datasourse later, not in the initialization or the begining.
How can i do in that case? for example when the user press a page button (outside the grid). Doing $("#Grid").ejGrid("expandAll") works fine but just for the main grid.

Thanks again!

[Jayaprakash Kamaraj]

Hi Ignacio, 

To overcome this problem we suggest you to use below code example in button click. Please refer to the below code example and sample. 

<script type="text/javascript"> 

    $("#refresh").click(function () { 

$("#Grid").ejGrid("expandAll")  

var grid = $(".e-grid"); 

 

for(i=1;i<grid.length;i++){ 

var id = grid.eq(i).attr("id"); 

$("#" + id).ejGrid("expandAll")  

} 

    }); 

 

 

</script> 

Sample: http://jsplayground.syncfusion.com/bousjyas 

Regards, 

Jayaprakash K. 

[Ignacio]

Perfect!
Thank you very much!!

[Seeni Sakthi Kumar Seeni Raj]

Hi Ignacio, 

We are glad that your requirement has been achieved. If you require further assistance, please let us know. 

Regards, 

Seeni Sakthi Kumar S.