DropDownDisplayMode Enum

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

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.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.

<DxToolbar DropDownDisplayMode="DropDownDisplayMode.DropDown">
    <Items>
        <DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-left" />
        <DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-center" />
        <DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-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>

Run Demo: Toolbar - Drop-Down Items