DxDropDownBox.Buttons Property

Allows you to add command buttons to the DropDown Box editor.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public RenderFragment Buttons { get; set; }

Property Value

Type	Description
RenderFragment	A collection of buttons (UI fragments).

Remarks

The DxDropDownBox component has a built-in button that invokes a drop-down window. Set the ShowDropDownButton property to false to hide this button.

You can use the Buttons property to add custom command buttons to the editor. The following buttons are available:

• DxDropDownBoxDropDownButton - A button that invokes the drop-down window in the DxDropDownBox component.
• DxEditorButton - A custom button displayed in an editor.

Buttons are displayed in an editor in the following order:

1. The Clear button. Use the ClearButtonDisplayMode property to control the button visibility.
2. Custom and default buttons specified in the Buttons property. The buttons are displayed in the order they appear in the markup.
3. Built-in buttons.

<label for="ddbMultipleSelectionListBox" class="cw-480 mb-1">Employees</label>
<DxDropDownBox @bind-Value="Value"
                QueryDisplayText="QueryText"
                InputId="ddbMultipleSelectionListBox"
                CssClass="cw-480"
                ShowDropDownButton="false"
                ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto">
    <Buttons>
        <DxDropDownBoxDropDownButton Position="EditorButtonPosition.Left" />
        <DxEditorButton Text="Default" Click="SetDefaultValue" />
    </Buttons>
    <DropDownBodyTemplate>
        <DxListBox ... />
    </DropDownBodyTemplate>
</DxDropDownBox>

@code {
    object Value { get; set; }

    // ...
    void SetDefaultValue(MouseEventArgs args) {
        // Value = ...
    }
}

We do not recommend that you use conditional render within the <Buttons></Buttons tag. This may cause an incorrect button order. The following example demonstrates a case when the Button1 may change its position.

<Buttons>    
    @if(condition) {
        <DxEditorButton Text="Button1"/>    
    }    
    <DxEditorButton Text="Button2"/>    
    <DxEditorButton Text="Button3"/>
</Buttons>

If you need to hide a button, set the Visible property to false.