Blazor accordion : Expand/Collapse All items programatically
Attachment: AccordionItemsNul_122ffd1c.7z
|
<button @onclick="ExpandAll">Expand All</button>
<button @onclick="CollapseAll">Collapse All</button>
<SfAccordion @ref="Accordion" DataSource="@AccordionItems" @bind-ExpandedIndices="Item">
<AccordionTemplates>
<HeaderTemplate>
<div>@((context as AccordionData).EmployeeName)</div>
</HeaderTemplate>
<ItemTemplate>
@{
AccordionData ContextData = context as AccordionData;
<div>
<div><b>Employee ID: </b>@ContextData.EmployeeId</div>
<div><b>Designation: </b>@ContextData.Designation</div>
</div>
}
</ItemTemplate>
</AccordionTemplates>
</SfAccordion>
@code{
SfAccordion Accordion;
int[] Item;
public void ExpandAll() // To Expand all accordion items
{
Item = new int[AccordionItems.Count];
if (AccordionItems != null)
{
for(int index=0; index < AccordionItems.Count; index++)
{
Item[index] = index;
}
}
}
public void CollapseAll() // To Collapse all accordion items
{
Item = new int[] { };
}
...
} |
|
Please note that we have introduced several API break in this release. We would like you to review the breaking changes from the below location before you upgrade. https://blazor.syncfusion.com/documentation/release-notes/18.2.44/?type=breaking-changes" |
ExpandItem on SfAccordion method is missing now ?
I would like programmatically call ExpandItem, and with animation. How to do that ?
@bind-Expanded on SfAccordionItem works, but without animation.
Thank you
Hi,
I have an accordion that is dynamically built, I can't put a fixed @bind-expanded on each item, how do I use expand in this case?
The ExpandItem is very useful, because i could expand by passing the index of the item I wanted.
|
<SfButton IsPrimary="true" @onclick="ToExpandItem">EXPAND ITEM</SfButton>
<SfButton IsPrimary="true" @onclick="ToExpandAllItems">EXPAND ALL ITEM</SfButton> <br /> <br /> <SfAccordion @ref="AcrdnObj"> <AccordionItems> @foreach (var item in AccordionItems) { <AccordionItem Header="@item.Header" Content="@item.Content" @bind-Expanded="item.IsExpanded"> </AccordionItem> } </AccordionItems> </SfAccordion> @code {
SfAccordion AcrdnObj; public class AccordionData { public string Header { get; set; } public string Content { get; set; } public bool IsVisible { get; set; } public bool IsDisable { get; set; } public bool IsExpanded { get; set; } } public void ToExpandItem() { AccordionItems[1].IsExpanded = true; } public void ToExpandAllItems() { for (int i = 0; i < AccordionItems.Count; i++) { AccordionItems[i].IsExpanded = true; } } } |
- How you are rendering the accordion dynamically?
- Share all the accordion related code snippets
Hi
When expanding items programmatically (version 20.3.0.47) using @bind-Expanded, the animations don't work.
Is ther ea fix for this?
By default, the animation will not be applied when expanding the accordion items programmatically, as it is not possible with the current Accordion architecture. Hence, you can see animation only when you manually expand or collapse an accordion item.
Hello,
We wanted to have a Expand All/Collapse all button for our accordion object. Using v20.4.0.38, we were able to programmatically Expand/Collapse using the following key tweaks:
- Trigger TriggerExpandingEvent() or TriggerCollapsingEvent() for each item in addition to setting the bound-indices.
- Add
LoadOnDemand="false" to the accordion to force the pre-rending of the containers, otherwise the animation doesn't show up the first time you trigger it after page load.
<SfAccordion @bind-ExpandedIndices="_accordionExpandedIndices" @ref="_accordionRef" LoadOnDemand="false">
{........}
C# Methods:
SfAccordion _accordionRef;
private int[] _accordionExpandedIndices;
Hi Monique,
TriggerExpandingEvent and TriggerCollapsingEvent are used for our source-end internal operations and it’s not recommended way. So You can achieve your requirement of dynamically expanding or collapsing all accordion items by using the ExpandedIndices property of the SfAccordion component as shown in the below code snippet.
[index.razor]
|
<button @onclick="ExpandAll">Expand All</button> <button @onclick="CollapseAll">Collapse All</button>
<SfAccordion @ref="@Accordion" @bind-ExpandedIndices="_accordionExpandedIndices" LoadOnDemand="false"> <AccordionItems> @foreach (AccordionData Item in AccordionItems) { <AccordionItem> <HeaderTemplate> <div>@(Item.EmployeeName)</div> </HeaderTemplate> <ContentTemplate> <div> <div><b>Employee ID: </b>@Item.EmployeeId</div> <div><b>Designation: </b>@Item.Designation</div> </div> </ContentTemplate> </AccordionItem> } </AccordionItems> </SfAccordion>
@code{ SfAccordion Accordion; int[] _accordionExpandedIndices;
public void ExpandAll() // To Expand all accordion items { _accordionExpandedIndices = Enumerable.Range(0, AccordionItems.Count).ToArray(); }
public void CollapseAll() // To Collapse all accordion items { _accordionExpandedIndices = new int[0]; } |
Regards,
Vijay Ravi
Attachment: accordion_expand_or_collapse_7ff788be.zip
Good luck on your project.
Thank you for sharing, good luck on your project.
You're welcome! Don't hesitate to reach out if you have any more questions or need further assistance
- 14 Replies
- 11 Participants
- Marked answer
-
JT Joseph Tan
- Jul 9, 2020 12:47 AM UTC
- Dec 22, 2023 05:20 AM UTC
