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

Expand row in grid

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. 

1 Reply

RN Rahul Narayanasamy Syncfusion Team May 1, 2019 07:38 PM UTC

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) 
    } 
  } 
} 
 

 
Please get back to us if you need further assistance. 

Regards, 
Rahul N. 


Loader.
Live Chat Icon For mobile
Up arrow icon