DxTextBox.Buttons Property

Allows you to add command buttons to the Text Box.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

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

Property Value

A collection of buttons (UI fragments).

|

Remarks

YouTube video

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.

<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; } = "[email protected]";
    string EmailLink { get; set; } = "mailto:[email protected]";
    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.

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

See Also

DxTextBox Class

DxTextBox Members

DevExpress.Blazor Namespace