Skip to main content
All docs
V25.1
  • DxSearchBox.Buttons Property

    Allows you to add command buttons to the Search Box.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.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

    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
        }
    }
    

    Search Box - Command Button

    See Also