DropDownDisplayMode Enum

Lists values that specify how a drop-down item displays a menu.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public enum DropDownDisplayMode

Members

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.

Related API Members

The following properties accept/return DropDownDisplayMode values:

• DxToolbar.DropDownDisplayMode
• DxToolbarItemBase.DropDownDisplayMode

Remarks

A toolbar item displays a drop-down list if you populate the DxToolbarItem.Items collection. The drop-down list can be displayed as a regular sub-menu, as a modal dialog, or as a modal bottom sheet. You can specify the type explicitly or let the component adapt to the device type. To specify the display mode, use the following properties:

• DxToolbarBase.DropDownDisplayMode - Applies to all menus in the toolbar.
• DxToolbarItemBase.DropDownDisplayMode - Applies to an individual item.

These properties accept DropDownDisplayMode enumeration values.

Note

• When the DxToolbarBase.DropDownDisplayMode is set to Auto, toolbar menus are adapted to the device type.
• When the DxToolbarItemBase.DropDownDisplayMode is set to Auto, a menu’s display mode is set up according to the DxToolbarBase.DropDownDisplayMode property’s value.

<div class="card p-2">
    <DxToolbar DropDownDisplayMode="DropDownDisplayMode.DropDown">
        <Items>
            <DxToolbarItem GroupName="align" IconCssClass="oi oi-align-left" />
            <DxToolbarItem GroupName="align" IconCssClass="oi oi-align-center" />
            <DxToolbarItem GroupName="align" IconCssClass="oi oi-align-right" />
            <DxToolbarItem Text="Format" BeginGroup="true">
                <Items>
                    <DxToolbarItem Text="Times New Roman" />
                    <DxToolbarItem Text="Tahoma" />
                    <DxToolbarItem Text="Verdana" />
                </Items>
            </DxToolbarItem>
            <DxToolbarItem Text="Size" DropDownDisplayMode="DropDownDisplayMode.ModalDialog">
                <Items>
                    <DxToolbarItem Text="8pt" />
                    <DxToolbarItem Text="10pt" />
                    <DxToolbarItem Text="12pt" />
                </Items>
            </DxToolbarItem>
            <DxToolbarItem Text="Style" DropDownDisplayMode="DropDownDisplayMode.ModalBottomSheet">
                <Items>
                    <DxToolbarItem IconCssClass="tb-icon tb-icon-bold" Text="Bold" />
                    <DxToolbarItem IconCssClass="tb-icon tb-icon-italic" Text="Italic" />
                    <DxToolbarItem IconCssClass="tb-icon tb-icon-underline" Text="Underline" />
                </Items>
            </DxToolbarItem>
        </Items>
    </DxToolbar>
</div>

Run Demo: Toolbar - Drop-Down Items