DxAccordion.SubItemExpandButtonDisplayMode Property

Specifies where the Accordion component displays expand and collapse buttons for nested items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(AccordionExpandButtonDisplayMode.Start)]
[Parameter]
public AccordionExpandButtonDisplayMode SubItemExpandButtonDisplayMode { get; set; }

Property Value

Type	Default	Description
AccordionExpandButtonDisplayMode	Start	An AccordionExpandButtonDisplayMode enumeration value.

Available values:

Name	Description
Start	The Accordion displays an expand button to the left of items.
End	The Accordion displays an expand button to the right of items.
None	The Accordion does not display an expand button.

Remarks

The example below displays expand buttons to the right of nested items:

<DxAccordion SubItemExpandButtonDisplayMode="AccordionExpandButtonDisplayMode.End">
    <Items>
        <DxAccordionItem Text="Grid"></DxAccordionItem>
        <DxAccordionItem Text="Navigation and Layout" Expanded="true">
            <Items>
                <DxAccordionItem Text="Accordion">
                    <Items>
                        <DxAccordionItem Text="API Members"></DxAccordionItem>
                        <DxAccordionItem Text="Examples"></DxAccordionItem>
                        <DxAccordionItem Text="Docs"></DxAccordionItem>
                     </Items>
                </DxAccordionItem>
                <DxAccordionItem Text="Context Menu"></DxAccordionItem>
            </Items>
        </DxAccordionItem>
        <DxAccordionItem Text="Data Editors"></DxAccordionItem>
    </Items>
</DxAccordion>

If you want to position root Accordion items, use the RootItemExpandButtonDisplayMode property.