Expand all AccordionItems

Is there a straight forward way to expand or collapse all of an Accordion's items from an external button?
Setting the Selected property of the AccordionItem will only inverse the item's current state which makes it rather cumbersome to use.

Did you try the Expanded property?

I'm afraid I cannot find any Expanded property?

RadzenAccordionItem has Expanded property. Here is how we use it: https://github.com/radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos/Shared/MainLayout.razor#L83

I tried the below, but nothing happens when I change the value of the bool expandedFlag. I want the user to be able to use the chevron to expand/collapse single items, but also to have a separate button that changes all AccordionItems to expanded or collapsed at once. How can I do that?

<RadzenAccordionItem @bind-Expanded="@expandedFlag"

@martink

Do these things:

image
In each accordion item:
image
The boolean and the click handler of your button:
image

@iliyan.kulishev - That is what I tried first. The problem is that this will only inverse the current state, meaning that items that are already expanded individually by the user will be collapsed and vice versa.

I suppose I could keep track of each item's state by listening to the Expand and Collapse events, but I'm still hoping that there is an easier way?

@martink

I see what you mean, yeah.

  1. It would be nice if CollapseAll, ExpandAll methods on the accordion ref were available.

  2. Most importantly, trying to work with Selected on accordion item exposes a bug:

image
When you change the value of parameter Selected, it passes the accordion item to SelectItem
image
SelectItem expands/collapses the item if it exists/doesn't in the collection of expanded indexes.
image
Upon adding an item, the value of item.Selected is taken into account. But this is not the case in RemoveItem()
image
The statements inside the if should be executed only if( ! item.Selected).

@korchev - Any plans for adding ExpandAll/Collapse all functionallity?

1 Like

@korchev Is there any update to adding CollapseAll/ExpanAll to the Accordion?

Thanks

1 Like