DxSearchBox.Buttons Property

Allows you to add command buttons to the Search Box.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

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

Remarks

You can add command buttons to the Search Box:

1. Add the <Buttons></Buttons> tag to the component’s markup to define the Buttons collection.
2. Add DxEditorButton objects to the Buttons collection.
3. Set up button properties to customize the buttons:
   • CssClass
   • Position
   • and so on

The following code snippet adds custom buttons to the Search Box.

<DxSearchBox @bind-Text="@Value"
             aria-label="Search" >
    <Buttons>
        <DxEditorButton IconCssClass="oi oi-arrow-thick-bottom"
                        Click="@OnPreviousButtonClick">
        </DxEditorButton>
        <DxEditorButton IconCssClass="oi oi-arrow-thick-top"
                        Click="@OnNextButtonClick">
        </DxEditorButton>
    </Buttons>
</DxSearchBox>

@code {
    string Value { get; set; }

    void OnPreviousButtonClick() {
        // your logic
    }
    void OnNextButtonClick()  {
        // your logic
    }
}