DxToolbarItem.DropDownCaption Property

Specifies the caption for the modal list with child items.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue("")]
[Parameter]
public string DropDownCaption { get; set; }

Property Value

Type	Default	Description
String	String.Empty	A String value that specifies the caption.

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.

When you set these properties to ModalDialog or ModalBottomSheet, you can also specify the modal list’s caption. To do this, use the DropDownCaption property.

If you do not set the DropDownCaption property, the toolbar item text is used as the modal list’s caption.

<div class="card p-2">
    <DxToolbar>
        <Items>
            <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" 
                        DropDownCaption="Font Size">
                <Items>
                    <DxToolbarItem Text="8pt" />
                    <DxToolbarItem Text="10pt" />
                    <DxToolbarItem Text="12pt" />
                </Items>
            </DxToolbarItem>
            <DxToolbarItem Text="Style" 
                        DropDownDisplayMode="DropDownDisplayMode.ModalBottomSheet" 
                        DropDownCaption="Font Style">
                <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" />
                </Items>
            </DxToolbarItem>
        </Items>
    </DxToolbar>
</div>