DxEditorButton.Focusable Property

Includes a custom button in the page’s tab sequence.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v26.1.dll

Declaration

[DefaultValue(false)]
[Parameter]
public override bool Focusable { get; set; }

Property Value

Type	Default	Description
Boolean	false	true if the custom button is focusable; otherwise, false.

Remarks

You can make a custom button focusable (set the Focusable property to true). In this case, the button is included in the page’s tab sequence, and users can access it with the keyboard:

• Tab / Shift+Tab: Move focus through focusable elements on the page (including buttons).
• Enter / Space: Invoke a click event handler for a focused button.

The following code snippet makes customized spin buttons and custom large increment buttons focusable:

Razor

<DxSpinEdit @bind-Value="@SpinEditValue"
            BindValueMode="BindValueMode.OnInput"
            ShowSpinButtons="false"
            CssClass="editor-width">
    <Buttons>
        <DxEditorButton IconCssClass="editor-icon editor-icon-chevron-left"
                        Tooltip="Decrement by 10"
                        Focusable="true"
                        Click="@(_ => OnLargeIncrementButtonClick(false))" />
        <DxSpinButtons Focusable="true"/>
        <DxEditorButton IconCssClass="editor-icon editor-icon-chevron-right"
                        Tooltip="Increment by 10"
                        Focusable="true"
                        Click="@(_ => OnLargeIncrementButtonClick(true))" />
    </Buttons>
</DxSpinEdit>

@code {
    Decimal SpinEditValue { get; set; } = 15;
    void OnLargeIncrementButtonClick(bool isIncrement) {
        SpinEditValue += isIncrement ? 10 : -10;
    }
}

CSS

.editor-width {
    max-width: 320px;
    width: 100%;
}

Run Demo: Editors - Command Buttons

Refer to Command Buttons for additional information on how to customize command buttons in DevExpress Blazor Editors.