DxToolbarItem.DropDownVisible Property

Specifies the state of an item’s drop-down window (visible/hidden).

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[DefaultValue(false)]
[Parameter]
public bool DropDownVisible { get; set; }

Property Value

Type	Default	Description
Boolean	**false**	true, if the drop-down window is displayed; otherwise, false.

Remarks

Each Toolbar item can have multiple child items which are specified as elements of the parent item’s Items collection. A root-level toolbar item that has child items is rendered as a drop-down button that displays a hierarchical pop-up menu when clicked.

Use the DropDownVisible property to show/hide a drop-down item’s children. To respond to the property change, handle the DropDownVisibleChanged event.

<p>Is item exapnded - @IsDropDownVisible</p>
<DxToolbar>
    <DxToolbarItem Text="Data operations" @bind-DropDownVisible="@IsDropDownVisible">
        <Items>
            <DxToolbarItem Text="Insert"></DxToolbarItem>
            <DxToolbarItem Text="Edit"></DxToolbarItem>
            <DxToolbarItem Text="Delete"></DxToolbarItem>
        </Items>
    </DxToolbarItem>
</DxToolbar>

@code {
    bool IsDropDownVisible = false;
}

You can handle an drop-down item’s button as one button or split it into two buttons - a regular button and a drop-down button that invokes a pop-up window. To enable this behavior, set the SplitDropDownButton property to true.

Run Demo: Toolbar - Drop-Down Items