DxDropDownButton.DropDownDisplayMode Property

Specifies how the Drop-Down Button component displays its drop-down elements.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[DefaultValue(DropDownDisplayMode.Auto)]
[Parameter]
public DropDownDisplayMode DropDownDisplayMode { get; set; }

Property Value

Type	Default	Description
DropDownDisplayMode	Auto

An enumeration value.

Available values:

Name	Description
Auto

Mobile and tablet devices show the menu in a modal bottom sheet.
Other device types show the menu as a drop-down list. ‘

| | DropDown |

The menu is shown as a drop-down list.

| | ModalDialog |

The menu is shown in a modal dialog.

| | ModalBottomSheet |

The menu is shown in a modal bottom sheet.

Remarks

Use the DropDownDisplayMode property to specify display mode for the Drop-Down Button component’s drop-down elements. When the property is set to Auto, drop-down elements adapt to the device type.

The following code snippet changes the display mode of drop-down elements:

razor

<DxDropDownButton RenderStyle="ButtonRenderStyle.Secondary"
                  Text="Clipboard"
                  IconCssClass="tb-icon tb-icon-paste"
                  CssClass="me-1"
                  DropDownDisplayMode="DropDownDisplayMode.ModalBottomSheet">
    <Items>
        <DxDropDownButtonItem Text="Cut" IconCssClass="menu-icon-cut menu-icon" />
        <DxDropDownButtonItem Text="Copy" IconCssClass="menu-icon-copy menu-icon" />
        <DxDropDownButtonItem Text="Paste" IconCssClass="tb-icon tb-icon-paste" />
        <DxDropDownButtonItem Text="Paste Special" BeginGroup="true">
            <Items>
                <DxDropDownButtonItem Text="Paste Text Only" />
                <DxDropDownButtonItem Text="Paste Picture" Enabled="false" />
                <DxDropDownButtonItem Text="Paste as Hyperlink" />
            </Items>
        </DxDropDownButtonItem>
    </Items>
</DxDropDownButton>