Setting accordion Selected programmiically

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

Say a User clicks on a button I want do:

AccordionCtrl.Selected = 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;
}

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

By settings its Selected property to true.

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

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

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)