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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Expand row in grid

Thread ID:

Created:

Updated:

Platform:

Replies:

144316 Apr 30,2019 11:17 AM UTC May 1,2019 07:38 PM UTC Angular - EJ 2 1
loading
Tags: Grid
Shounak
Asked On April 30, 2019 11:17 AM UTC

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 [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon