The DevExpress Blazor Editors library ships with built-in command buttons designed to open dropdowns or increase/decrease editor values (via the mouse or keyboard shortcuts).
You can customize command buttons as follows:
Hide built-in buttons using
Show***Buttonproperties.Add component-specific command buttons and customize associated appearance:
- DxComboBoxDropDownButton — Opens a drop-down menu in the DxComboBox component.
- DxDateEditDropDownButton — Opens a drop-down calendar in the DxDateEdit component.
- DxDropDownBoxDropDownButton — Opens a drop-down window in the DxDropDownBox component.
- DxSpinButtons — Spin buttons that allow you to increase and decrease values in the DxSpinEdit component.
- DxTimeEditDropDownButton — Opens a drop-down time picker in the DxTimeEdit component.
Use DxEditorButton to add a custom button to an editor (DxComboBox, DxDateEdit, DxMaskedInput, DxDropDownBox, DxSpinEdit, DxTextBox, and DxTimeEdit). You can define button appearance and behavior as neccessary.
This sample hides built-in buttons, customizes component-specific buttons, and adds custom buttons to editors as follows:
- ComboBox — "Add Employee" button
- Spin Edit — "Currency" button
- Spin Edit — "Large Increment" button
- Date Edit — "Next Date" and "Previous Date" buttons
- Masked Input — "Send Email" button
You can mark customized component-specific buttons and custom buttons focusable (set the Focusable property to true). When implemented, buttons are included in the page tab sequence, and users can access them via keyboard:
- Tab / Shift+Tab - Moves focus through focusable elements on a given page (including buttons).
- Enter / Space - Invokes a click event handler for a focused button.
Enable the Focusable Custom Buttons option to activate this capability in the demo.