Setting accordion Selected programmiically

Radzen.Blazor Components
1

How do I programmatically set the "Selected" choice for an accordian?

Say a User clicks on a button I want do:

AccordionCtrl.Selected = 2;

2

Hi @JBlaze,

Yes, you need to use the Selected property of the item you want to select. Something like this:

 <RadzenAccordion>
      <Items>
           <RadzenAccordionItem Text="Orders" Selected=@selected>
               Details for Orders
           </RadzenAccordionItem>
           <RadzenAccordionItem Text="Employees" >
              Details for Employees
           </RadzenAccordionItem>
           <RadzenAccordionItem Text="Customers">
              Details for Customers
           </RadzenAccordionItem>
      </Items>
</RadzenAccordion>
<button @onclick=@(() => selected = !selected)></button>
@code {
  bool selected = false;
}
3

based on your example How can select expanded the "Customers" accordion?

4

By settings its Selected property to true.

<RadzenAccordionItem Text="Customers" Selected=@selected>
    Details for Customers
</RadzenAccordionItem>
5

I know this topic is 2 years ago, but it is one of the few answers that come up at google search, and I want to clarify something about controlling "Selected" programmatically.

If we take this example:
<RadzenAccordionItem Text="Customers" Selected=@selected>

The Selected property is being controlled from two paces here:

  1. The parent using selected
  2. The component itself by clicking on the header to expand/collapse it.

You can, set selected = true, to expand it, and selected = false, to collapse it, as long as you never click on the component manually.

At that point the selected bool values will be reversed. At that point selected = true collapses it, selected = false, expands it.

This is why you lose track of the actual state of the component. (You no longer know if the item is selected or not).

The only thing you can do in such situation is invert its Selected state by using:
selected = !selected;

1 Like
6

What about situation, when I want to have a possibility to decide which accordion item to expand programmatically?

Using example from above I tried to do something like that:

<RadzenAccordion>
      <Items>
           <RadzenAccordionItem Text="Orders" Selected=@(selectedItem == 1)>
               Details for Orders
           </RadzenAccordionItem>
           <RadzenAccordionItem Text="Employees"  Selected=@(selectedItem == 2) >
              Details for Employees
           </RadzenAccordionItem>
           <RadzenAccordionItem Text="Customers"  Selected=@(selectedItem == 3)>
              Details for Customers
           </RadzenAccordionItem>
      </Items>
</RadzenAccordion>

On some actions I set chosen item to be selected.

It works fine only when I go 1, then 2 and then 3.
When I click at some AccoridonItem, or try to set previous, not next number, it breaks and no item expands. While debugging I can see that Expand callback fires couple times at once.

Is there any way to decide programmaticaly which item to expand? (I want to adapt accordion as a sort of steps component and let user go back and next between items)

1 Like
7

Had this issue too. Make sure on you do this with your radzen accordion

<RadzenAccordion Multiple="true">

I think what's happening is that each time it loops through as you work down the menu ( 1 then 2 then 3), it is able to change the active one to false first, which none are now active, then it sets the next one to true, which works.

When you go in reverse order, lets say 3 is open and you click 2, as it goes through the loop and tries to set accordion item 2 to active, it can't because 3 is still active until the loop reaches it to set it to false.

Hope this makes sense.