DxTextBox.Buttons Property

Allows you to add command buttons to the Text Box.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.1.dll

NuGet Package: DevExpress.Blazor

Declaration

C#

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

Property Value

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

Remarks

Accept "Target Cookies" to watch embedded YouTube videos Open cookie settings

Or

Watch this video on Youtube Watch on youtube

You can add command buttons to the Text 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 the Send E-mail button to the Text Box.

Razor

<DxTextBox Text="@Email"
           TextChanged="@((string value) => OnEmailChanged(value))"
           CssClass="dx-demo-editor-width">
    <Buttons>
        <DxEditorButton IconCssClass="editor-icon editor-icon-mail"
                        Tooltip="Send Email"
                        NavigateUrl="@EmailLink" />
    </Buttons>
</DxTextBox>


@code{
    string Email { get; set; } = "[e-mail]";
    string EmailLink { get; set; } = "mailto:[e-mail]";
    void OnEmailChanged(string email) {
        Email = email;
        EmailLink = $"mailto:{email}";
    }
}

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.

Razor

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