Expand/Collapse All

Question

Is there a way to add expand/collapse all to the grid detailed row and do it in the header like the screenshot below?https://ej2.syncfusion.com/angular/documentation/grid/row/detail-template

Vikram Sundararajan · Answer

Hi Iana Stapelberg,Greetings from Syncfusion support,Based on your requirement wants to expand/collapse all to
the grid detailed row and do it in the header. You can use the detailExpandAll
method to expand all the details rows. And use the detailCollapseAll
method to collapse all the expanded rows. Please refer the below code snippet,
documentation and sample for more information,

[app.component.ts]
   
   public created() {
      var btn = createElement('span', { className: 'e-icons e-small e-plus'  });
      btn.onclick = () => {
        if (this.detailState) {
          this.grid.detailCollapseAll();
          this.detailState = false;
        } else {
          this.grid.detailExpandAll();
          this.detailState = true;
        }
      };
      this.grid.element.querySelector('.e-detailheadercell').appendChild(btn);
    }

Sample: 
https://stackblitz.com/edit/angular-boejtr?file=src%2Fapp.component.html,src%2Fapp.component.tsdetailExpandAll- https://ej2.syncfusion.com/angular/documentation/api/grid/#detailexpandalldetailCollapseAll- https://ej2.syncfusion.com/angular/documentation/api/grid/#detailcollapseallIf you require further assistance,
please do not hesitate to contact us. We are always here to help you.Regards,Vikram S

Iana Stapelberg · Answer

Thank you!I made some small changes and it works almost as expected.Are there any expanding/collapsing events that are triggered when a detailed row is expanded/collapsed?

Vikram Sundararajan · Answer

Hi Iana Stapelberg,We have reviewed your query about event triggers when
expanding and collapsing the hierarchical grid. We suggest you use "detail-state-change"
event in grid.on() function and check whether it is in expanded state
using isExpanded property. We have attached a code snippet and sample for your
reference.

[app.component.ts]
   
  public detailDataBound(){
      console.log('Expanded');
    }
    public load() {
      this.grid.on('detail-state-change', (args) => {
        console.log(args)
        if (args.isExpanded) {
         
  console.log('Expanded');
        } else {
         
  console.log('Collapsed');
        }
      });
    }

Sample: https://stackblitz.com/edit/angular-boejtr-9elqaa?file=src%2Fapp.component.html,src%2Fapp.component.tsPlease let us know if you need any further assistance.Regards,Vikram S

Stanislav Bizdiga · Answer

Hi Vikram,Is there a similar event to 'detail-state-change'

for a TreeGrid with details?Attempting the solution on a grid works, but doesn't seem to function on a TreeGrid.Also property 'on' does not exist on type 'TreeGridComponent'. How would one apply the solution for TreeGrid?

Vikram Sundararajan · Answer

Hi Iana Stapelberg,Query #1 : Is there
a similar event to 'detail-state-change' for a TreeGrid with details?Query #2 : Also,
property 'on' does not exist on type 'TreeGridComponent'.There is no event
like 'detail-state-change' in treegrid. Instead, we can use this event with
‘on’ function from grid’s instance. Kindly refer to the following code.

[app.component.ts]
   
  public load() { 
      this.treegrid.grid.on('detail-state-change', (args)
  => {
        console.log(args)
        if (args.isExpanded) {
          console.log('Expanded');
        } else {
          console.log('Collapsed');
        }
      });
    }

Sample : https://stackblitz.com/edit/angular-jqr5b5-gytgcm?file=src%2Fapp.component.htmlRegards,Vikram S

usman malik SE · Answer

how we can expand the and collapse rows when we have transposed the data into rows

Aishwarya Rameshbabu · Answer

Hi
usman malik,Based
on the provided information and the screenshot, we have observed that you are
transposing the Grid data. By default, transposing Grid data is only supported
for display purposes. Consequently, we cannot perform any Grid actions with
this structure, including expanding or collapsing records using the Grid
methods.RegardsAishwarya
R