Search results

InPlaceEditorModel API in Vue InPlaceEditor API component

Interface for a class InPlaceEditor

Properties

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.

submitClick

EmitType<MouseEvent>

Event triggers when click the submit button.

validating

EmitType<ValidateEventArgs>

The event will be fired while validating current value.

actionOnBlur

string

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.

adaptor

string

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.
     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
        adaptor :'UrlAdaptor',
    });
    editObj.appendTo('#inplace_editor');

cancelButton

ButtonModel

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

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
        cancelButton :  { iconCss: 'e-icons e-cancel-icon' }
    });
    editObj.appendTo('#inplace_editor');

cssClass

string

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

disabled

boolean

Specifies whether to enable editing mode or not.

editableOn

string

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.
     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
        cancelButton :  { iconCss: 'e-icons e-cancel-icon' }
    });
    editObj.appendTo('#inplace_editor');

emptyText

string

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

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
        cancelButton :  { iconCss: 'e-icons e-cancel-icon' }
    });
    editObj.appendTo('#inplace_editor');

enableEditMode

boolean

Specifies to show/hide the editing mode.

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
        cancelButton :  { iconCss: 'e-icons e-cancel-icon' }
    });
    editObj.appendTo('#inplace_editor');

enableHtmlSanitizer

boolean

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

enablePersistence

boolean

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

  1. value

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
        cancelButton :  { iconCss: 'e-icons e-cancel-icon' }
    });
    editObj.appendTo('#inplace_editor');

enableRtl

boolean

Enable or disable rendering component in right to left direction.

locale

string

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

mode

string

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.
     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
         mode : 'Inline'
    });
    editObj.appendTo('#inplace_editor');

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.

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
        type: "Text",
        model: { placeholder: "Enter employee name" }
    });
    editObj.appendTo('#inplace_editor');

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.

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
      name: 'Editor',
    });
    editObj.appendTo('#inplace_editor');

popupSettings

PopupSettingsModel

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

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
         popupSettings: {
            model: { width: 'auto' }
        },
    });
    editObj.appendTo('#inplace_editor');

primaryKey

string | number

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

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
          primaryKey: '',
    });
    editObj.appendTo('#inplace_editor');

saveButton

ButtonModel

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

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
        savebutton : { iconCss: 'e-icons e-save-icon' }
    });
    editObj.appendTo('#inplace_editor');

showButtons

boolean

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

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
         showButtons : true
    });
    editObj.appendTo('#inplace_editor');

submitOnEnter

boolean

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

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
       submitOnEnter : true
    });
    editObj.appendTo('#inplace_editor');

template

string | HTMLElement

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

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
      template : '<p>editable text</p>'
    });
    editObj.appendTo('#inplace_editor');

textOption

string

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.

type

string

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

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
           type : 'Text'
    });
    editObj.appendTo('#inplace_editor');

url

string

Gets the url for server submit action.

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
       url : 'https://ej2services.syncfusion.com/production/web-services/api/Editor/UpdateData'
    });
    editObj.appendTo('#inplace_editor');

validationRules

Object

Maps the validation rules for the input.

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
        name: "Today",
        validationRules: {
        Today: { required: true }
  }
    });
    editObj.appendTo('#inplace_editor');

value

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

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

     <div id="inplace_editor"></div>
import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';

    let editObj: InPlaceEditor = new InPlaceEditor({
        value: 'Editor'
    });
    editObj.appendTo('#inplace_editor');