How to Expand or Collapse All Headers in Blazor Pivot Table?

Introduction

By default, all headers in the pivot table 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 article demonstrates how to dynamically expand and collapse all headers in a Blazor Pivot Table component.

Dynamically expanding or collapsing all headers

To dynamically expand or collapse all headers in a pivot table, you need to add two external buttons. One button is for expand all headers, while the other button is designated for collapsing all headers. You must then handle the click events for these buttons to expand or collapse all the headers.

Here is a code sample demonstrating how to dynamically expand and collapse all headers in a pivot table using the Syncfusion Button component:

[Index.razor]

<SfButton CssClass="expand-button" IsPrimary="true" OnClick="@onExpand">Expand All</SfButton>
<SfButton CssClass="collapse-button" IsPrimary="true" OnClick="@onCollapse">Collapse All</SfButton>
<SfPivotView ID="PivotView" @ref="Pivot" TValue="ProductDetails">
    <PivotViewDataSourceSettings ExpandAll="expandAll" DrilledMembers="drilledMembers">
    </PivotViewDataSourceSettings>
</SfPivotView>

@code {
    private bool expandAll { get; set; } = false;
    private List<PivotViewDrilledMember> drilledMembers = new List<PivotViewDrilledMember>();
    public async Task onExpand(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        expandAll = true;
        drilledMembers = new List<PivotViewDrilledMember>();
    }
    public void onCollapse(Microsoft.AspNetCore.Components.Web.MouseEventArgs args)
    {
        expandAll = false;
        drilledMembers = new List<PivotViewDrilledMember>();
    }
}

In the code example above, when the “Expand All” button is clicked, the onExpand event method is triggered. Within the event method, set the ExpandAll property to true to expand all headers. In the onCollapse event method, set the same property to false to collapse all headers. Additionally, reset the DrilledMembers property to an empty list, because this property always functions inversely in relation to the ExpandAll property. By implementing this code, you can dynamically expand or collapse all headers in a Blazor Pivot Table based on your specific requirements.

The following GIF illustrates the results of the above code snippet.

GIF

You can refer to this GitHub sample for a practical demonstration of this functionality.

Conclusion

We hope you enjoyed learning how to customize values in a Blazor Pivot Table based on specified conditions.

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

For current customers, our Blazor components available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Pivot Table and other Blazor components.

If you have any questions 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!