DxSpinButtons.Focusable Property

Includes spin buttons 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 spin buttons are focusable; otherwise, false.

Remarks

You can make spin buttons focusable (set the Focusable property to true). In this case, these buttons are included in the page’s tab sequence, and users can access them with a 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.