Skip to main content

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:

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:

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>

Drop Down Display Mode

Run Demo: Toolbar - Drop-Down Items

See Also