How to dynamically 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 might 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.

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 used to expand all headers, while the other button is designated for collapsing all headers. Following this, you must handle the click events for these buttons in order to expand or collapse all the headers.

Here’s 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 will be triggered. Within the event method, we set the ExpandAll property to true, thereby expanding all headers. Subsequently, in the onCollapse event method, we set the same property to false for collapsing all headers. Additionally, we reset the DrilledMembers property to an empty list because this property always works in vice-versa with respect to the ExpandAll property. By implementing this code, you can dynamically expand or collapse all headers in a Blazor Pivot Table based on your requirements.

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

GIF

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

Conclusion

I 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 feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Pivot Table 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!