• Material 3
  • Fluent
  • Fluent 2
  • Bootstrap 5
  • Tailwind CSS
  • High Contrast
  • Fluent 2 High Contrast
Preferences
Mode Selection
Touch
Mouse
Theme Selection
Theme Mode
Localization
*Translated by Google Translator.
Currency

Example of Overview in ASP.NET Core In-place Editor Control

This sample demonstrates the default functionalities of the In-place Editor component. Click on the dotted input element to switch to the editable state and save or cancel it by clicking the actions buttons.

DEMO
SOURCE
Mode
Editable On
Show Buttons
Disable

The In-place Editor component is used to edit values in place and update them to the server.

In-place Editor modes can be switched by selecting the appropriate values provided in a drop-down. The applicable editor positions are as follows:

The edit on modes of In-place Editor can be switched by selecting the appropriate values provided in a drop-down. The applicable modes are as follows:

  • Click - Editor opens the edit input with single click of textbox.
  • DblClick - Editor opens the edit input with double click of textbox.
  • EditIconClick - Edit mode can be open with the use of edit icon only which is visible on hover of textbox.

The Save and Cancel buttons of the In-place Editor component can be shown or hidden by switching the Show Button check box state. If the action buttons are hidden, then you can save the data by clicking outside the target or by pressing the Enter key. You can cancel the edit request by pressing the Esc key.

More information on the In-place Editor instantiation can be found in the  documentation section .

Transform your ASP.NET Core web apps today with Syncfusion® ASP.NET Core components
85+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE
opens in a new tab