Expand row in grid

[Shounak]

I have a ejs grid, where one of the column is a button,  and on click of a button in a particular row that row should expand and show other details, and on click of the button again the details should collapse, and the actual row should be displayed again, keeping the other rows as it is. Kindly help to acheive this. 

[Rahul Narayanasamy]

Hi Shounak, 

 

Greetings from Syncfusion. 

 

Query: I have a ejs grid, where one of the column is a button,  and on click of a button in a particular row that row should expand and show other details, and on click of the button again the details should collapse, and the actual row should be displayed again, keeping the other rows as it is. Kindly help to acheive this.  

 

We have validated your query and created a sample by using column template. Here, we have rendered button in one of the columns by using column template. Then expand and collapse the row by using button click. Please find the below code example and sample for your reference. 

 

[code example] 

<div class="control-section"> 

    <ejs-grid #grid [dataSource]='data' id='Grid'> 

        <ng-template #detailTemplate let-data> 

            <table class="detailtable" width="100%"> 

                ... 

                <tbody> 

                    <tr> 

                        <td rowspan="4" style="text-align: center;"> 

                            <img class='photo' src="./assets/grid/images/{{data.EmployeeID}}.png" alt="{{data.EmployeeID}}" /> 

                        </td> 

                        <td> 

                            <span style="font-weight: 500;">First Name: </span> {{data.FirstName}} 

                        </td> 

                        <td> 

                            <span style="font-weight: 500;">Postal Code: </span> {{data.PostalCode}} 

                        </td> 

                    </tr> 

                    ... 

                </tbody> 

            </table> 

        </ng-template> 

        <e-columns> 

            <e-column headerText='Expand/collapse' width='150' textAlign='Center'> 

                <ng-template #template let-data> 

                    <button (click)="clicked($event)">Click</button> 

                </ng-template> 

            </e-column> 

            ... 

        </e-columns> 

 

    </ejs-grid> 

 

 

</div> 

... 

export class AppComponent { 

  ... 

 

  ngOnInit(): void { 

    ... 

  } 

  clicked(e) { 

    let tr = parentsUntil(e.target, 'e-row'); 

    let trIdx = parseInt(tr.getAttribute('aria-rowindex')); 

    if (parentsUntil(e.target, 'e-row').children[0].classList.contains('e-detailrowexpand')) { 

      this.grid.detailRowModule.collapse(trIdx) 

    } else { 

      this.grid.detailRowModule.expand(trIdx) 

    } 

  } 

} 

 

Sample link: https://stackblitz.com/edit/angular-fyuvmy-mckxqd?file=app.component.ts  

Help Documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns/#column-template  

 

Please get back to us if you need further assistance. 

Regards, 

Rahul N.