detailsCollapse event on the Angular grid

[Ahmad Al Edlbi]

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 Regards
Ahmad

[Rajapandi Ravi]

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]

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 Regards

Ahmad

[Rajapandi Ravi]

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