DxAccordion.RenderMode Property

Specifies when the Accordion component renders item content in the DOM.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

Declaration

[DefaultValue(ExpandableContentRenderMode.Expanded)]
[Parameter]
public ExpandableContentRenderMode RenderMode { get; set; }

Property Value

Type	Default	Description
ExpandableContentRenderMode	Expanded	Accordion item content render mode.

Available values:

Name	Description
Expanded	Re-renders content every time the block is expanded and removes it from the DOM when the block is collapsed.
All	Renders all content on page load, regardless of the expansion state.
OnDemand	Adds content to the DOM the first time an item is expanded and keeps it in the DOM after the item is collapsed.

Remarks

The RenderMode property specifies when the Accordion component adds item content to the DOM. The guidelines below explain how to select the optimal rendering mode for your specific scenario.

Note

Regardless of the RenderMode value, items are always updated when:

• the bound dataset changes;
• the user applies a new filter.

Value	Rendering Behavior	Use Case
Expanded	Re-renders Accordion item content into the DOM every time the item is expanded and removes it from the DOM when the item is collapsed.	Increase page load speed. Minimize the DOM footprint at the expense of a small render delay each time the item is expanded.
All	Renders all Accordion items into the DOM on page load.	Improves UI responsiveness at the expense of a slightly increased page load time.
OnDemand	Adds Accordion item content to the DOM the first time the item is expanded and keeps it in the DOM after the item is collapsed.	Balance initial page load performance, responsiveness, and resource consumption at the expense of a small render delay the first time the item is expanded.

The following code snippet pre-renders all Accordion items on page load:

<DxAccordion RenderMode="ExpandableContentRenderMode.All">
    <Items>
        <DxAccordionItem Text="Shapes" Expanded="true">
            <Items>
                <DxAccordionItem Text="Circle" />
                <DxAccordionItem Text="Square" />
            </Items>
        </DxAccordionItem>
        <DxAccordionItem Text="Templates" />
    </Items>
</DxAccordion>