InPlaceEditorComponent

23 Sep 202511 minutes to read

ejs-inplaceeditor represents the Angular InPlaceEditor Component.

<ejs-inplaceeditor></ejs-inplaceeditor>

Properties

actionOnBlur ActionBlur

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.

Defaults to ‘Submit’

adaptor AdaptorType

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 { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor  [adaptor]='adaptor'></ejs-inplaceeditor>"
})
export class AppComponent {
   public adaptor: string = 'UrlAdaptor';
}

Defaults to ‘UrlAdaptor’

cancelButton ButtonModel

Used to customize the “Cancel” button UI appearance by defining Button model configuration.

import { Component } from "@angular/core";
import { InPlaceEditorComponent} from '@syncfusion/ej2-angular-inplace-editor';
import {ButtonModel } from '@syncfusion/ej2-buttons';
@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor [cancelButton]='cancelButton'></ejs-inplaceeditor>"
})
export class AppComponent {
    public cancelButton: ButtonModel = { content: 'Cancel', cssClass: 'e-outline'};
}

Defaults to { iconCss: ‘e-icons e-cancel-icon’ }

cssClass string

Defines single/multiple classes (separated by space) to be used for customization of In-place editor.

Defaults to ’’

disabled boolean

Specifies whether to enable editing mode or not.

Defaults to false

editableOn EditableType

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 { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor  [editableOn]='editableOn'></ejs-inplaceeditor>"
})
export class AppComponent {
   public editableOn: string = 'DblClick';
}

Defaults to ‘Click’

emptyText string

Sets the text to be shown when an element has ‘Empty’ value.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor  [emptyText]='emptyText'></ejs-inplaceeditor>"
})
export class AppComponent {
   public emptyText: string = 'text';
}

Defaults to ‘Empty’

enableEditMode boolean

Specifies to show/hide the editing mode.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor  [enableEditMode]='enableEditMode'></ejs-inplaceeditor>"
})
export class AppComponent {
   public enableEditMode: boolean = true;
}

Defaults to false

enableHtmlParse 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.

Defaults to true

enableHtmlSanitizer boolean

Defines whether to allow the cross-scripting site or not.

Defaults to true

enablePersistence boolean

Enable or disable persisting component’s state between page reloads. If enabled, following list of states will be persisted.

1. value

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor  [enablePersistence]='enablePersistence'></ejs-inplaceeditor>"
})
export class AppComponent {
   public enablePersistence: boolean = true;
}

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

mode RenderMode

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 { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor  [mode]='mode'></ejs-inplaceeditor>"
})
export class AppComponent {
   public mode: string = 'Inline';
}

Defaults to ‘Popup’

model 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.

iimport { Component } from "@angular/core";
import { InPlaceEditorComponent} from '@syncfusion/ej2-angular-inplace-editor';
import {TextBoxModel } from '@syncfusion/ej2-inputs';
@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor   [type]='type' [model]='model'></ejs-inplaceeditor>"
})
export class AppComponent {
   public model : TextBoxModel  = { placeholder: "Enter employee name" }
   public type : string  ='Text';
}

Defaults to null

name 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 { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor  [name]='name'></ejs-inplaceeditor>"
})
export class AppComponent {
   public name: string = 'Editor';
}

Defaults to ’’

popupSettings PopupSettingsModel

Specifies the object to customize popup display settings like positions, animation etc.

import { Component } from "@angular/core";
import { PopupSettingsModel } from "@syncfusion/ej2-inplace-editor/src/inplace-editor/base/models-model";
@Component({
  selector: "app-root",
  template:
    " <ejs-inplaceeditor  [popupSettings]='popupSettings'></ejs-inplaceeditor>"
})
export class AppComponent {
  public popupSettings: PopupSettingsModel = {
    model: { width: "auto" }
  };
}

Defaults to {}

primaryKey string|number

Defines the unique primary key of editable field which can be used for saving data in data-base.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor  [primaryKey]='primaryKey'></ejs-inplaceeditor>"
})
export class AppComponent {
   public primaryKey: string = '';
}

Defaults to ’’

saveButton ButtonModel

Used to customize the “Save” button UI appearance by defining Button model configuration.

import { Component } from "@angular/core";
import { InPlaceEditorComponent} from '@syncfusion/ej2-angular-inplace-editor';
import {ButtonModel } from '@syncfusion/ej2-buttons';
@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor [saveButton]='saveButton'></ejs-inplaceeditor>"
})
export class AppComponent {
    public saveButton: ButtonModel = { content: 'OK', cssClass: 'e-outline'};
}

Defaults to { iconCss: ‘e-icons e-save-icon’ }

showButtons boolean

Used to show/hide the ok/cancel buttons of In-place editor.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor  [showButtons]='showButtons'></ejs-inplaceeditor>"
})
export class AppComponent {
   public showButtons: boolean = true;
}

Defaults to true

submitOnEnter boolean

Sets to trigger the submit action with enter key pressing of input.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor [submitOnEnter]='submitOnEnter'></ejs-inplaceeditor>"
})
export class AppComponent {
   public submitOnEnter: boolean =true;
}

Defaults to true

template any

Specifies the HTML element ID as a string that can be added as a editable field.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor [template]='template'></ejs-inplaceeditor>"
})
export class AppComponent {
   public template: string = '<p> Editor</p>';
}

Defaults to ’’

textOption textOptionType

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.

Defaults to ‘Never’

type InputType

Specifies the type of components that integrated with In-place editor to make it as editable.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor [type]='type'></ejs-inplaceeditor>"
})
export class AppComponent {
   public type: string = 'Inline';
}

Defaults to ‘Text’

url string

Gets the url for server submit action.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor  [url]='url'></ejs-inplaceeditor>"
})
export class AppComponent {
   public url: string = 'https://ej2services.syncfusion.com/production/web-services/api/Editor/UpdateData';
}

Defaults to ’’

validationRules { : }

Maps the validation rules for the input.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor  [name]='name' [validationRules]='validationRules'></ejs-inplaceeditor>"
})
export class AppComponent {
   public name: string = 'Today';

   public validationRules =  {
        Today: { required: true }
}

}

Defaults to null

value string|number|Date|string[]|Date[]|number[]

Specifies the display value for input when original input value is empty.

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: " <ejs-inplaceeditor  [value]='value'></ejs-inplaceeditor>"
})
export class AppComponent {
   public value: string = 'Editor';
}

Defaults to null

Methods

destroy

Removes the control from the DOM and also removes all its related events.

Returns void

save

Submit the edited input value to the server.

Returns void

validate

Validate current editor value.

Returns void

Events

actionBegin EmitType<ActionBeginEventArgs>

The event will be fired before the data submitted to the server.

actionFailure EmitType<ActionEventArgs>

The event will be fired when data submission failed.

actionSuccess EmitType<ActionEventArgs>

The event will be fired when data submitted successfully to the server.

beforeSanitizeHtml EmitType<BeforeSanitizeHtmlArgs>

Event triggers before sanitize the value.

beginEdit EmitType<BeginEditEventArgs>

The event will be fired before changing the mode from default to edit mode.

cancelClick EmitType<MouseEvent>

Event triggers when click the cancel button.

change EmitType<ChangeEventArgs>

The event will be fired when the integrated component value has changed that render based on the type property
in the In-place editor.

created EmitType<Event>

The event will be fired once the component rendering is completed.

destroyed EmitType<Event>

The event will be fired when the component gets destroyed.

endEdit EmitType<EndEditEventArgs>

The event will be fired when the edit action is finished and begin to submit/cancel the current value.

submitClick EmitType<MouseEvent>

Event triggers when click the submit button.

validating EmitType<ValidateEventArgs>

The event will be fired while validating current value.