How to dynamically expand or collapse all headers in Pivot Table

This article explains how to dynamically expand or collapse all headers in the Angular Pivot Table.

Dynamically expand or collapse all headers in the Pivot Table

By default, all headers can be expanded by setting the expandAll property to true. Similarly, all headers can be collapsed by setting the same property to false. However, in certain UI scenarios, you may want to either expand or collapse all headers at runtime. This can be achieved by adding external buttons and handling their click events to trigger the expansion or collapse of the pivot table headers.

Here is a code example that shows how to dynamically expand and collapse all headers in a pivot table.

[app.component.html]

    <button ejs-button #expand id="expand" (click)="onExpand()" [isprimary]="true">Expand All</button>
    <button ejs-button #collapse id="collapse" (click)="onCollapse()" [isprimary]="true">Collapse All</button>
    <ejs-pivotview #pivotview id="PivotView"></ejs-pivotview>

[app.component.ts]

    @ViewChild('pivotview') 
    public pivotView: PivotView;

    @ViewChild('expand')
    public expandBtn: ButtonComponent;

    @ViewChild('collapse')
    public collapseBtn: ButtonComponent;
    
    onExpand() {
        this.pivotView.setProperties(
          {
            dataSourceSettings: {
              expandAll: true,
              drilledMembers: [],
            },
          },true);
        this.pivotView.refreshData();
      }
    
    onCollapse() {
        this.pivotView.setProperties(
          {
            dataSourceSettings: {
              expandAll: false,
              drilledMembers: [],
            },
          },true);
        this.pivotView.refreshData();
    }

In the above code example, when the onExpand function is called, we set the expandAll property to true, which expands all headers. Conversely, in the onCollapse function, we set the same property to false, collapsing all headers. Subsequently, we reset the drilledMembers property to an empty array because this property always works in vice versa with respect to the expandAll property. After setting the properties, the refreshData method is called to programmatically refresh the pivot table.

The following GIF image, which portrays the results of the code snippet mentioned above,

GIF

For a practical demonstration, refer to the sample of stackblitz.

Conclusion
I hope you enjoyed learning how to dynamically expand or collapse all headers in Pivot Table.

You can refer to our Angular Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Pivot Table example example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!