Expand detail row on selection of row

[Chris Barber]

Angular ej2 grid

Is it possible to expand a grid detail on selection of the row?

Thanks

[Isuriya Rajan]

Hi Chris, 

Thanks for contacting Syncfusion support, 

We can expand the detail row while selecting the row .Here we have achieve this using the rowSelected event. It will trigger when row got selected. ”expand ” method will expand selected row. 

Refer the below code example 

rowSelect(){ 

       this.grid.detailRowModule.expand(this.grid.getSelectedRowIndexes())//expand method will expand the selected row 

    } 

Please refer the below sample and documentation for your reference 

Sample: http://plnkr.co/edit/Sb7LAzrHgkvUR26kYX7p?p=preview 

Documentation: http://ej2.syncfusion.com/15.4.23/angular/documentation/grid/api-gridComponent.html#rowselected 

Regards, 

Isuriya R 

[Chris Barber]

This is fantastic! Thanks for your help.

Further to this, is it possible to collapse if the row is already selected?

[Isuriya Rajan]

Hi Chris,  

We suspect that you need  to collapse the row, while deselecting the already selected row. We can collapse the expanded row using the “collapse” method 

Code example for your reference  

rowDeselect(){  

       this.grid.detailRowModule.collapse(this.grid.getSelectedRowIndexes())//collapse method will collapse expanded row  

    }  

If we misunderstood your query please get back to us with more information.  

Sample for your reference: 

Sample: http://plnkr.co/edit/Sb7LAzrHgkvUR26kYX7p?p=preview 

Regards, 

Isuriya R 

[Chris Barber]

Awesome! Works perfectly!

[Isuriya Rajan]

Hi Chris, 

We were happy to hear your problem has been resolved. Thanks for your reply. 

Regards, 

Isuriya R