Accordion collapse all

Radzen.Blazor Components
1

I'm trying to collapse all items into an accordion using Selected but it doesn't work if one item is expanded.
Is it possible to fix this or is there any way to do this?
example:

<div class="rz-p-sm-12">
    <RadzenButton Click=@Open Icon="Expand" />
    <RadzenButton Click=@Close Icon="Close" />
    @if(accordionItems != null)
    {
        <RadzenAccordion Multiple="true">
            <Items>
                @foreach (var item in accordionItems)
                {
                    <RadzenAccordionItem Text=@item.Title Icon=@item.Icon Selected=@item.IsSelected>
                        @item.Description
                    </RadzenAccordionItem>
                }
            </Items>
        </RadzenAccordion>
    }
    <EventConsole @ref=@console Style="width: 100%;" />
</div>

@code {
    EventConsole console;

    List<AccordionItem> accordionItems;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
 
        accordionItems = new List<AccordionItem>()
            {
                new AccordionItem("Orders", "account_balance_wallet", "Details for Orders", false),
                new AccordionItem("Employees", "account_box", "Details for Employees", false),
                new AccordionItem("Customers", "accessibility", "Details for Customers", false), 
            };
    }

    private void Open() {
        accordionItems.ForEach(t => t.IsSelected = true);
        accordionItems.ForEach(t => console.Log($"{t.IsSelected}"));
    }

    private void Close() {
        accordionItems.ForEach(t => t.IsSelected = false);
        accordionItems.ForEach(t => console.Log($"{t.IsSelected}"));
    }
    
    public class AccordionItem 
    {
        public AccordionItem(string title, string icon, string description, bool isSelected) 
        {
            Title = title;
            Icon = icon;
            Description = description;
            IsSelected = isSelected;
        }

        public string Title { get; set; }
        public string Icon { get; set; }
        public string Description { get; set; }
        public bool IsSelected { get; set; }
    }
}

Steps:

  1. Open any one RadzenAccordionItem
  2. Click on Close Button
2

I was able to replicate the problem, we will check what is causing it and we will provide fix.

1 Like
3

After update i can't open more than one RadzenAccordionItem in accordion with Multiple="true" and i can't close RadzenAccordionItem if it opened
Steps:

  1. Open any one RadzenAccordionItem
  2. Click on it again
  3. Click on any other
4

I'm unable to replicate such issue on our demos:

5

you need to use this code:

<div class="rz-p-sm-12">
    <RadzenButton Click=@Open Icon="Expand" />
    <RadzenButton Click=@Close Icon="Close" />
    @if(accordionItems != null)
    {
        <RadzenAccordion Multiple="true">
            <Items>
                @foreach (var item in accordionItems)
                {
                    <RadzenAccordionItem Text=@item.Title Icon=@item.Icon Selected=@item.IsSelected>
                        @item.Description
                    </RadzenAccordionItem>
                }
            </Items>
        </RadzenAccordion>
    }
    <EventConsole @ref=@console Style="width: 100%;" />
</div>

@code {
    EventConsole console;

    List<AccordionItem> accordionItems;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
 
        accordionItems = new List<AccordionItem>()
            {
                new AccordionItem("Orders", "account_balance_wallet", "Details for Orders", false),
                new AccordionItem("Employees", "account_box", "Details for Employees", false),
                new AccordionItem("Customers", "accessibility", "Details for Customers", false), 
            };
    }

    private void Open() {
        accordionItems.ForEach(t => t.IsSelected = true);
        accordionItems.ForEach(t => console.Log($"{t.IsSelected}"));
    }

    private void Close() {
        accordionItems.ForEach(t => t.IsSelected = false);
        accordionItems.ForEach(t => console.Log($"{t.IsSelected}"));
    }
    
    public class AccordionItem 
    {
        public AccordionItem(string title, string icon, string description, bool isSelected) 
        {
            Title = title;
            Icon = icon;
            Description = description;
            IsSelected = isSelected;
        }

        public string Title { get; set; }
        public string Icon { get; set; }
        public string Description { get; set; }
        public bool IsSelected { get; set; }
    }
}
6

I see. In my opinion we might need to add support for @bind-Selected to support such case, I will try it tomorrow and will release update.

7

The problem is already fixed in our master branch and it will be released before the end of the week. You will need to update your code to use two-way binding for Accordion item Selected property - i.e. @bind-Selected=@item.IsSelected.

1 Like