Interface for a class InPlaceEditor
EmitType<ActionBeginEventArgs>
The event will be fired before the data submitted to the server.
The event will be fired when data submission failed.
The event will be fired when data submitted successfully to the server.
EmitType<BeforeSanitizeHtmlArgs>
Event triggers before sanitize the value.
The event will be fired before changing the mode from default to edit mode.
EmitType<MouseEvent>
Event triggers when click the cancel button.
The event will be fired when the integrated component value has changed that render based on the type
property
in the In-place editor.
EmitType<Event>
The event will be fired once the component rendering is completed.
EmitType<Event>
The event will be fired when the component gets destroyed.
The event will be fired when the edit action is finished and begin to submit/cancel the current value.
EmitType<MouseEvent>
Event triggers when click the submit button.
The event will be fired while validating current value.
Specifies the action to be perform when user clicks outside the container, that is focus out of editable content. The possible options are,
Cancel
: Cancel’s the editing and resets the old content.Submit
: Submit the edited content to the server.Ignore
: No action is perform with this type and allows to have many containers open.Specifies the adaptor type that are used DataManager to communicate with DataSource. The possible values are,
UrlAdaptor
: Base adaptor for interacting with remote data services.ODataV4Adaptor
: Used to interact with ODataV4 service.WebApiAdaptor
: Used to interact with Web api created with OData endpoint.import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}> {
private adaptor: string = 'UrlAdaptor';
render() {
return (
<InPlaceEditorComponent adaptor={this.adaptor}>
</InPlaceEditorComponent>
);
}
}
ButtonModel
Used to customize the “Cancel” button UI appearance by defining Button model configuration.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
import {ButtonModel } from '@syncfusion/ej2-buttons';
export class Default extends SampleBase<{}, {}> {
private cancelButton: ButtonModel = { content: 'Cancel', cssClass: 'e-outline'};
render() {
return (
<InPlaceEditorComponent cancelButton={this.cancelButton}>
</InPlaceEditorComponent>
);
}
}
string
Defines single/multiple classes (separated by space) to be used for customization of In-place editor.
boolean
Specifies whether to enable editing mode or not.
Specifies the event action of input to enter edit mode instead of using edit icon. The possible values are:
Click
: Do the single click action on input to enter into the edit mode.DblClick
: Do the single double click action on input to enter into the edit mode.EditIconClick
: Disables the editing of event action of input and allows user to edit only through edit icon.import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}> {
private editableOn: string = 'DblClick';
render() {
return (
<InPlaceEditorComponent editableOn={this.editableOn}>
</InPlaceEditorComponent>
);
}
}
string
Sets the text to be shown when an element has ‘Empty’ value.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}> {
private emptyText: string = 'text';
render() {
return (
<InPlaceEditorComponent emptyText={this.emptyText}>
</InPlaceEditorComponent>
);
}
}
boolean
Specifies to show/hide the editing mode.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}> {
private enableEditMode: boolean = true;
render() {
return (
<InPlaceEditorComponent enableEditMode={this.enableEditMode}>
</InPlaceEditorComponent>
);
}
}
boolean
It enables or disables the parsing of HTML string content into HTML DOM elements for In-place Editor. If the value of the property is set to false, the In-place Editor value will be displayed as HTML string instead of HTML DOM elements.
boolean
Defines whether to allow the cross-scripting site or not.
boolean
Enable or disable persisting component’s state between page reloads. If enabled, following list of states will be persisted.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}> {
private enablePersistence: boolean = true;
render() {
return (
<InPlaceEditorComponent enablePersistence={this.enablePersistence}>
</InPlaceEditorComponent>
);
}
}
boolean
Enable or disable rendering component in right to left direction.
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Specifies the mode to be render while editing. The possible modes are :
Inline
: Editable content is displayed as inline text and ok/cancel buttons are displayed at right bottom corner of input.Popup
: Editable content and ok/cancel buttons are displayed inside popup while editing.import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}> {
private mode: string = 'Inline';
render() {
return (
<InPlaceEditorComponent mode={this.mode}>
</InPlaceEditorComponent>
);
}
}
AutoCompleteModel
| ColorPickerModel
| ComboBoxModel
| DatePickerModel
| DateRangePickerModel
| DateTimePickerModel
| DropDownListModel
| MaskedTextBoxModel
| MultiSelectModel
| NumericTextBoxModel
| RichTextEditorModel
| SliderModel
| TextBoxModel
| TimePickerModel
Specifies the model object configuration for the integrated components like AutoComplete, DatePicker,NumericTextBox, etc.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
import {TextBoxModel } from '@syncfusion/ej2-inputs';
export class Default extends SampleBase<{}, {}> {
private model : TextBoxModel = { placeholder: "Enter employee name" }
private type : string ='Text';
render() {
return (
<InPlaceEditorComponent model={this.model} type={this.type}>
</InPlaceEditorComponent>
);
}
}
string
Specifies the name of the field which is used to map data to the server. If name is not given, then component ID is taken as mapping field name.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}> {
private name: string = 'Editor';
render() {
return (
<InPlaceEditorComponent name={this.name}>
</InPlaceEditorComponent>
);
}
}
Specifies the object to customize popup display settings like positions, animation etc.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
import { PopupSettingsModel } from "@syncfusion/ej2-inplace-editor/src/inplace-editor/base/models-model";
export class Default extends SampleBase<{}, {}> {
private popupSettings: PopupSettingsModel = {
model: { width: "auto" }
};
render() {
return (
<InPlaceEditorComponent popupSettings={this.popupSettings}>
</InPlaceEditorComponent>
);
}
}
string
| number
Defines the unique primary key of editable field which can be used for saving data in data-base.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}> {
private primaryKey: string = '';
render() {
return (
<InPlaceEditorComponent primaryKey={this.primaryKey}>
</InPlaceEditorComponent>
);
}
}
ButtonModel
Used to customize the “Save” button UI appearance by defining Button model configuration.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
import {ButtonModel } from '@syncfusion/ej2-buttons';
export class Default extends SampleBase<{}, {}> {
private saveButton: ButtonModel = { content: 'OK', cssClass: 'e-outline'};
render() {
return (
<InPlaceEditorComponent saveButton={this.saveButton}>
</InPlaceEditorComponent>
);
}
}
boolean
Used to show/hide the ok/cancel buttons of In-place editor.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}> {
private showButtons: boolean = true;
render() {
return (
<InPlaceEditorComponent showButtons={this.showButtons}>
</InPlaceEditorComponent>
);
}
}
boolean
Sets to trigger the submit action with enter key pressing of input.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}> {
private submitOnEnter: boolean =true;
render() {
return (
<InPlaceEditorComponent submitOnEnter={this.submitOnEnter}>
</InPlaceEditorComponent>
);
}
}
string
| HTMLElement
| Function
Specifies the HTML element ID as a string that can be added as a editable field.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}> {
private template: string = '<p> Editor</p>';
render() {
return (
<InPlaceEditorComponent template={this.template}>
</InPlaceEditorComponent>
);
}
}
Specifies the option to be set on initial rendering. It is applicable for DropDownList, AutoComplete, ComboBox, and MultiSelect component types. The possible options are:
Never
: The corresponding field value will never be set initially in the component.Always
: The corresponding field value will be set initially in the component.Specifies the type of components that integrated with In-place editor to make it as editable.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}> {
private type: string = 'Inline';
render() {
return (
<InPlaceEditorComponent type={this.type}>
</InPlaceEditorComponent>
);
}
}
string
Gets the url for server submit action.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}> {
private url: string = 'https://ej2services.syncfusion.com/production/web-services/api/Editor/UpdateData';
render() {
return (
<InPlaceEditorComponent url={this.url}>
</InPlaceEditorComponent>
);
}
}
{ : }
Maps the validation rules for the input.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}> {
private name: string = 'Today';
private validationRules = {
Today: { required: true }
render() {
return (
<InPlaceEditorComponent name={this.name} validationRules={this.validationRules}>
</InPlaceEditorComponent>
);
}
}
string
| number
| Date
| string[]
| Date[]
| number[]
Specifies the display value for input when original input value is empty.
import { render } from 'react-dom';
import * as React from 'react';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { SampleBase } from './sample-base';
export class Default extends SampleBase<{}, {}> {
private value: string = 'Editor';
render() {
return (
<InPlaceEditorComponent value={this.value}>
</InPlaceEditorComponent>
);
}
}