Skip to main content

DxToolbarItemBase.DropDownDisplayMode Property

Specifies how the toolbar’s drop-down item displays a menu.

Namespace: DevExpress.Blazor.Base

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type Default Description
DropDownDisplayMode Auto

A DropDownDisplayMode 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 sub-menu display mode for an individual toolbar item.

When the property is set to Auto, the menu’s display mode is set up according to the DxToolbar.DropDownDisplayMode property value. If you set an item’s DropDownDisplayMode property to a value different from Auto, you override the toolbar’s DropDownDisplayMode property.

Note

You can set menu’s display mode only for root toolbar items. If you specify the DxToolbarItemBase.DropDownDisplayMode property for child items, it is ignored.

<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