detailsCollapse event on the Angular grid

Question

I can't find the detailCollpase event in the Angular Grid API. Could you please tell me which event can be used as a substitute?Best RegardsAhmad

Rajapandi Ravi · Accepted Answer

Hi Ahmad, 

Thanks for the update 

In our EJ2 Grid we don’t have the detailsCollapse event like EJ1. Please refer the below documentation for more information. This article describes the API migration process of Grid component from Essential JS 1 to Essential JS 2. 

Documentation: https://ej2.syncfusion.com/angular/documentation/grid/ej1-api-migration/ 

We have analyzed your query and we could see that you like to remove the detailRow in the dom elements while collapsing the row. You can achieve your requirement by using internal event of grid.on method. Please refer the below code example and sample for more information. 





 
detailChange(args: any) { //using this argument we can get detail row 
    if(args.detailElement.parentElement.nextElementSibling.classList.contains('e-detailrow')) { 
      args.detailElement.parentElement.nextElementSibling.remove(); 
    } 
  } 
 

Sample: https://stackblitz.com/edit/angular-qdvkd3-rgx1va?file=app.component.ts 

Regards,Rajapandi R

Rajapandi Ravi · Answer

Hi Ahmad, 

Greetings from syncfusion support 

We have analyzed your query and we could see that you like to triggered the event when collapsing the detail row. To achieve your requirement, we have used the internal event grid.on method, so which will be triggered for collapse each time. We have shared the sample for your reference. 





 
export class AppComponent { 
  public data: any; 
  @ViewChild("grid") 
  public grid: GridComponent; 
 
  constructor() {} 
 
  detailChange(args: any) { 
    debugger; 
  } 
  dataBound() { 
    this.grid.on("detail-state-change", this.detailChange, this.grid); //bind the grid on event in dataBound event 
  } 
 
  ngOnInit(): void { 
    this.data = employeeData; 
  }} 

Sample: https://stackblitz.com/edit/angular-qdvkd3-hb5bnv?file=app.component.ts 

Screenshot: 

  

Regards, Rajapandi R

Ahmad Al Edlbi · Answer

Hallo Rajapandi,Thanks alot for your quick reply. Your suggestion seems to work fine but it does not help me with my use case. I want to remove the HTML element of the detailsRow from the DOM when this has been collapsed. Can i use the on method on the grid to bind an event handler for detailsCollapse which gives me the wanted DOM element ?.Best RegardsAhmad