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. Image for the cookie policy date
close icon

How to expand 3 levels Hierarchical grid

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!

5 Replies

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 15, 2016 12:36 PM UTC

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. 


Regards, 
Seeni Sakthi Kumar S. 



IG Ignacio September 15, 2016 03:17 PM UTC

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!


JK Jayaprakash Kamaraj Syncfusion Team September 16, 2016 09:39 AM UTC

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> 



Regards, 

Jayaprakash K. 



IG Ignacio September 21, 2016 09:08 PM UTC

Perfect!
Thank you very much!!


SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team September 22, 2016 05:17 AM UTC

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon