We are feel excited to announce that we are including a new component “In-place Editor” in the Essential JS 2 suite in the 2018 Volume 4 release. The component gives best way to do quick edit and instant save which comes with necessary form component integration such as Drop Down list, Date picker, Rich Text edit.

In this blog post, we are going to have look at the features and uses of In-place editor.

What is in-place editor

In-place Editor is a dynamic text editor that lets you to edit the value in the same place as they are displaying. It provides an easy way to edit the values of the page without redirecting to another page for editing. Simply user can see the edit view of text by hovering and click action of the text.

Where to use

Here we listed some of common the use of edit in-place component,

• Use when needs to edit few values of the page dynamically.
• When there a need of choose the text value from the collection of different formats i.e. simple text, in a drop down, etc.
• Use when there is need of choosing Rich Text Editor with in-line edit.
• User wants to edit a value without going to another page, but by staying on the same page.

How does in place edit work?

Simply hovering invites the user to do editing with In-place editor. The display text background color is highlighted with edit icon, and a tool tip is prompting the user to click the element to edit it.

• Once user clicks on the text to be edited, it is transformed into an editable form containing text field such as String or Drop Down or Calendar etc.
• A save button and a cancel button are also displayed.
• When user edits the contents in the text field and then the session will end with save / cancel action.
• The edited text can be sent to the server for saving and the form back to its display text state.

Inline Editor & Popup Editor

You can choose the design of in-place editor either with inline or popover.

Inline:

• You can edit the text in the page without separate the user from what they are going to edit, and it takes only a few moments to re-orientate themselves to the display view.

Popup:

• Once you click on the editable value, a small popover appears in which you can edit the fields. Also, you can easily position the popup to the user convenient sides of value using built-in positions.

Here you can see how to initialize in-place editor with Inline editor,

<ejs-inplaceeditor ref="editObj" id="inplace_editor" mode="Inline" type="Text" 
value="Andrew" > </ejs-inplaceeditor>

Quick edit and save

You can directly manipulate the field value and save it in server instantly with modified value.  Here, we listed the workflow of save and cancel,

• “Save” button click is triggers the save request and the value is saved through an AJAX call to the database. Once the value is updated and the edited input field return to the display view.
• Using an AJAX techniques results an asynchronous call to the server which does not need to refresh the page.
• “Cancel” button click is triggers to return to the original view of edited element without any changes.

Here let’s see how the edited value processed and saved to server,

What is sent to server?

 When submitting the edited value, modified data and related primary will be sent to server,

Server configuration to save:

With below code, you can see how the edited data will be processed to save it in server.

[Route("api/[controller]")]
public class EditorController : Controller
{

     [AcceptVerbs("Post")]
     [HttpPost][Route("UpdateData")]    
     public IEnumerable<SubmitModel> UpdateData([FromBody]SubmitModel value)
     {
         yield return value;
     }
     
     public class SubmitModel
     {
         public string Name { get; set; }
         public string PrimaryKey { get; set; }
         public string Value { get; set; }
     }
}

How to use Dropdown, Rich Text Edit and Date?

You can use Drop Down List, Rich Text Edit, Date Picker and some other components to be integrated with In-place editing. You can choose these component options by simply setting type property and by configuring component specific model properties.

For example, let’s see how to configure the In-place editing with Drop Down List,

<ejs-inplaceeditor ref="dropObj" id="dropdownEle" mode="Inline" value="Canada"
type="DropDownList" :model="dropdownModel">  </ejs-inplaceeditor>


export default Vue.extend({
data: () => {
let dropdownData = ['Australia', 'Bermuda', 'Canada', 'Cameroon', 'Denmark'];
return {
multiValue: ['Canada', 'Bermuda'],
dropdownModel: {
dataSource: dropdownData,
placeholder: 'Find a countries'
}
});

By giving type parameter value to “DropDownList”, and setting its data-source through model configuration, you can use the Drop-down component with in-place editing enabled. Its data source built either from JSON array or fetched from external URL given in url parameter.

Customization

In-place Editor provides the user needed customization options and through which you can use the editor with best optimal use. Here you can see few of them,

• Validation – As a form component, it provides an option to validate the user actions with HTML5 form validations.
• Editing actions – Event action to start editing can be customizable with events such as “click”, “double click” and through built in edit icon.
• Save / cancel actions – You can component the save and cancel actions with ‘on blur’ such as to ignore, cancel or submit the modified value.
• Key configuration – Flexible key actions with save on enter, cancel on escape, and tab to focus.
• Template components – Feasible integration with template components such as HTML5, checkbox etc.

Conclusion

We hope that you will get user friendly in-line editor with this In-place Editor and look forward to you trying it out in the 2018 Volume 4 release. You can find the 2018 Volume 4 Essential JS 2 install download link here. Also you can check out the In-place Editor sources on GitHub, the sample browser, and the documentation to explore live demos of the components and their various customization features.

The Vue In-place Editor is also available in React, Angular, ASP.NET Core and MVC frameworks that are built from their own TypeScript libraries.

If you wish to send us feedback or would like to ask any questions regarding them, please feel free to post in the comments section below, or contact us through our support forum or Direct-Trac.

The post Introducing Syncfusion’s New Vue In-place Editor Component for Web appeared first on Syncfusion Blogs.