Category / Section
How to prevent Blazor Accordion Item within the header?
2 mins read
The following steps are used to prevent the expanding or collapsing action of the Blazor Accordion Item when clicking the button in the Accordion header.
Step 1: Follow our Getting Started page to render our Blazor Accordion component.
Step 2: To prevent the Accordion from expanding or collapsing when clicking the button in the Accordion header element, use the HeaderTemplate to bind the click handler with the stopPropagation property set to true. It will perform an expand/collapse action whenever a click action is performed outside the button element.
[index.razor]
|
<SfAccordion @bind-ExpandedIndices=ExpandItems> <AccordionItems> @foreach (AccordionData Item in AccordionItems) { <AccordionItem> <HeaderTemplate> <button @onclick="() => ButtonClicked(Item)" @onclick:stopPropagation="true">@(Item.EmployeeName)</button> </HeaderTemplate> <ContentTemplate> <div> <div><b>Employee ID: </b>@Item.EmployeeId</div> <div><b>Designation: </b>@Item.Designation</div> </div> </ContentTemplate> </AccordionItem> } </AccordionItems> </SfAccordion> |
Sample: https://blazorplayground.syncfusion.com/hZLTtdDGJSPxKMDm
