Blazor In-place Editor Example - Overview

This sample demonstrates the default functionalities of the Blazor In-place Editor component. Click on the dotted input element to switch to the editable state. Save your changes by clicking the action buttons or pressing Enter, or cancel the edit by pressing the Esc key.

The In-place Editor component enables you to edit values inline and update them to the server seamlessly. The component supports multiple configuration options to customize the editing experience.

Editor Positions - The In-place Editor can be displayed in different positions:

• Inline - The editor appears directly in the original position
• Pop-up - The editor appears in a floating dialog box

Edit On Modes - The component supports multiple activation modes for editing:

• Click - Opens the edit input by single-clicking on the textbox
• DblClick - Opens the edit input by double-clicking on the textbox
• EditIconClick - Opens the edit input only by clicking the edit icon, which appears on hover

Action Buttons - The Save and Cancel buttons can be shown or hidden using the Show Buttons option. When buttons are disabled, you can save data by clicking outside the target element or pressing Enter, and cancel by pressing the Esc key.

See also

• In-place Editor Getting Started