HelpBot Assistant

How can I help you?

Configuration in React Inplace editor component

20 Feb 202624 minutes to read

Rendering modes

The In-place Editor supports two rendering modes:

  • Popup
  • Inline

By default, the component renders in Popup mode when opening the editor.

  • Popup mode: The editable container displays as a tooltip or popover above the element.

  • Inline mode: The editable container replaces the element directly, without a popup. Specify mode as Inline to enable this mode.

In the following sample, the In-place Editor renders in Inline mode. Dynamically switch modes by changing the dropdown selection.

[Class-component]

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
class App extends React.Component {
    inplaceEditorObj;
    dropdownObj;
    modeData = ['Inline', 'Popup'];
    model = { placeholder: 'Enter some text' };
    onChange(e) {
        const mode = e.itemData.value;
        this.inplaceEditorObj.mode = mode;
        this.inplaceEditorObj.dataBind();
    }
    render() {
        return (<div id='container'>
          <table className="table-section">
          <tbody>
              <tr>
                  <td> Mode: </td>
                  <td>
                      <DropDownListComponent id='dropDown' dataSource={this.modeData} width='auto' change={this.onChange = this.onChange.bind(this)} value='Inline' placeholder='Select Mode'/>
                  </td>
              </tr>
              <tr>
                  <td className="sample-td"> Enter your name: </td>
                  <td className="sample-td">
                      <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text; }} id='element' mode='Inline' value='Andrew' model={this.model}/>
                  </td>
                </tr>
                </tbody>
            </table>
      </div>);
    }
}
export default App;
import { InPlaceEditorComponent, RenderMode } from '@syncfusion/ej2-react-inplace-editor';
import { DropDownListComponent , ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent, RenderMode } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component {
  public inplaceEditorObj: InPlaceEditorComponent;
  public dropdownObj: DropDownListComponent;

  public modeData = ['Inline', 'Popup'];
  public model = { placeholder: 'Enter some text' };

  public onChange(e: ChangeEventArgs): void {
    const mode: RenderMode = e.itemData.value as RenderMode;
    this.inplaceEditorObj.mode = mode;
    this.inplaceEditorObj.dataBind();
  }

  public render() {
    return (
      <div id='container'>
          <table className="table-section">
          <tbody>
              <tr>
                  <td> Mode: </td>
                  <td>
                      <DropDownListComponent id='dropDown' dataSource= {this.modeData} width='auto' change={ this.onChange = this.onChange.bind(this) } value='Inline' placeholder='Select Mode'/>
                  </td>
              </tr>
              <tr>
                  <td  className="sample-td"> Enter your name: </td>
                  <td  className="sample-td">
                      <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text! }} id='element' mode='Inline' value='Andrew' model={this.model} />
                  </td>
                </tr>
                </tbody>
            </table>
      </div>
    );
  }
}
export default App;

[Functional-component]

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
function App() {
    let inplaceEditorObj;
    let dropdownObj;
    let modeData = ['Inline', 'Popup'];
    let model = { placeholder: 'Enter some text' };
    function onChange(e) {
        const mode = e.itemData.value;
        inplaceEditorObj.mode = mode;
        inplaceEditorObj.dataBind();
    }
    return (<div id='container'>
          <table className="table-section">
          <tbody>
              <tr>
                  <td> Mode: </td>
                  <td>
                      <DropDownListComponent id='dropDown' dataSource={modeData} width='auto' change={onChange = onChange.bind(this)} value='Inline' placeholder='Select Mode'/>
                  </td>
              </tr>
              <tr>
                  <td className="sample-td"> Enter your name: </td>
                  <td className="sample-td">
                      <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text; }} id='element' mode='Inline' value='Andrew' model={model}/>
                  </td>
                </tr>
                </tbody>
            </table>
      </div>);
}
export default App;
import { InPlaceEditorComponent, RenderMode } from '@syncfusion/ej2-react-inplace-editor';
import { DropDownListComponent , ChangeEventArgs } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent, RenderMode } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App (){
  let inplaceEditorObj: InPlaceEditorComponent;
  let dropdownObj: DropDownListComponent;

  let modeData = ['Inline', 'Popup'];
  let model = { placeholder: 'Enter some text' };

  function onChange(e: ChangeEventArgs): void {
    const mode: RenderMode = e.itemData.value as RenderMode;
    inplaceEditorObj.mode = mode;
    inplaceEditorObj.dataBind();
  }

    return (
      <div id='container'>
          <table className="table-section">
          <tbody>
              <tr>
                  <td> Mode: </td>
                  <td>
                      <DropDownListComponent id='dropDown' dataSource= {modeData} width='auto' change={ onChange = onChange.bind(this) } value='Inline' placeholder='Select Mode'/>
                  </td>
              </tr>
              <tr>
                  <td  className="sample-td"> Enter your name: </td>
                  <td  className="sample-td">
                      <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text! }} id='element' mode='Inline' value='Andrew' model={model} />
                  </td>
                </tr>
                </tbody>
            </table>
      </div>
    );

}
export default App;

Pop-up customization

Customize the popup mode by using the title and model properties in the popupSettings API.

The popup is rendered using the Essential® JS 2 React Tooltip component. Customize popup behavior by configuring tooltip properties and events through the model property of popupSettings.

For more details, refer to the Tooltip documentation section.

In the following sample, the popup title and position are customized using the popupSettings property. The dropdown lists all available tooltip positions. When a dropdown item is selected, the corresponding position value is bound to the model property and applied to the Tooltip component. Available position options include:

  • TopLeft
  • TopCenter
  • TopRight
  • BottomLeft
  • BottomCenter
  • BottomRight
  • LeftTop
  • LeftCenter
  • LeftBottom
  • RightTop
  • RightCenter
  • RightBottom

[Class-component]

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    inplaceEditorObj;
    dropdownObj;
    positionData = ['TopLeft', 'TopCenter', 'TopRight', 'BottomLeft', 'BottomCenter', 'BottomRight', 'LeftTop', 'LeftCenter', 'LeftBottom', 'RightTop', 'RightCenter', 'RightBottom'];
    model = { placeholder: 'Enter some text' };
    popupSettings = { title: 'Enter name', model: { position: 'BottomCenter' } };
    onChange(e) {
        this.inplaceEditorObj.popupSettings.model.position = e.value;
        this.inplaceEditorObj.dataBind();
    }
    render() {
        return (<div id='container'>
          <table className="table-section">
            <tbody>
                <tr>
                  <td> Position: </td>
                  <td>
                    <DropDownListComponent id='dropDown' value='BottomCenter' dataSource={this.positionData} placeholder='Select a position' popupHeight='150px' change={this.onChange = this.onChange.bind(this)}/>
                  </td>
                </tr>
                <tr>
                    <td className="edit-heading sample-td"> Enter your name: </td>
                    <td className="sample-td">
                      <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text; }} id='element' mode='Popup' value='Andrew' model={this.model} popupSettings={this.popupSettings}/>
                    </td>
                </tr>
              </tbody>
            </table>
      </div>);
    }
}
export default App;
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component {
  public inplaceEditorObj: InPlaceEditorComponent;
  public dropdownObj: DropDownListComponent;

  public positionData = ['TopLeft', 'TopCenter', 'TopRight', 'BottomLeft', 'BottomCenter', 'BottomRight', 'LeftTop', 'LeftCenter', 'LeftBottom', 'RightTop', 'RightCenter', 'RightBottom'];
  public model = { placeholder: 'Enter some text' };
  public popupSettings = { title: 'Enter name', model: { position: 'BottomCenter' } }

  public onChange(e: ChangeEventArgs): void {
    (this.inplaceEditorObj as any).popupSettings.model.position = e.value;
    this.inplaceEditorObj.dataBind();
  }

  public render() {
    return (
      <div id='container'>
          <table className="table-section">
            <tbody>
                <tr>
                  <td> Position: </td>
                  <td>
                    <DropDownListComponent id='dropDown' value='BottomCenter' dataSource= {this.positionData} placeholder='Select a position' popupHeight='150px' change={ this.onChange = this.onChange.bind(this) } />
                  </td>
                </tr>
                <tr>
                    <td  className="edit-heading sample-td"> Enter your name: </td>
                    <td  className="sample-td">
                      <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text! }} id='element' mode='Popup' value='Andrew' model={this.model} popupSettings={this.popupSettings} />
                    </td>
                </tr>
              </tbody>
            </table>
      </div>
    );
  }
}
export default App;

[Functional-component]

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    let inplaceEditorObj;
    let dropdownObj;
    let positionData = ['TopLeft', 'TopCenter', 'TopRight', 'BottomLeft', 'BottomCenter', 'BottomRight', 'LeftTop', 'LeftCenter', 'LeftBottom', 'RightTop', 'RightCenter', 'RightBottom'];
    let model = { placeholder: 'Enter some text' };
    let popupSettings = { title: 'Enter name', model: { position: 'BottomCenter' } };
    function onChange(e) {
        inplaceEditorObj.popupSettings.model.position = e.value;
        inplaceEditorObj.dataBind();
    }
    return (<div id='container'>
          <table className="table-section">
            <tbody>
                <tr>
                  <td> Position: </td>
                  <td>
                    <DropDownListComponent id='dropDown' value='BottomCenter' dataSource={positionData} placeholder='Select a position' popupHeight='150px' change={onChange = onChange.bind(this)}/>
                  </td>
                </tr>
                <tr>
                    <td className="edit-heading sample-td"> Enter your name: </td>
                    <td className="sample-td">
                      <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text; }} id='element' mode='Popup' value='Andrew' model={model} popupSettings={popupSettings}/>
                    </td>
                </tr>
              </tbody>
            </table>
      </div>);
}
export default App;
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App (){
  let inplaceEditorObj: InPlaceEditorComponent;
  let dropdownObj: DropDownListComponent;

  let positionData = ['TopLeft', 'TopCenter', 'TopRight', 'BottomLeft', 'BottomCenter', 'BottomRight', 'LeftTop', 'LeftCenter', 'LeftBottom', 'RightTop', 'RightCenter', 'RightBottom'];
  let model = { placeholder: 'Enter some text' };
  let popupSettings = { title: 'Enter name', model: { position: 'BottomCenter' } }

  function onChange(e: ChangeEventArgs): void {
    (inplaceEditorObj as any).popupSettings.model.position = e.value;
    inplaceEditorObj.dataBind();
  }


    return (
      <div id='container'>
          <table className="table-section">
            <tbody>
                <tr>
                  <td> Position: </td>
                  <td>
                    <DropDownListComponent id='dropDown' value='BottomCenter' dataSource= {positionData} placeholder='Select a position' popupHeight='150px' change={ onChange = onChange.bind(this) } />
                  </td>
                </tr>
                <tr>
                    <td  className="edit-heading sample-td"> Enter your name: </td>
                    <td  className="sample-td">
                      <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text! }} id='element' mode='Popup' value='Andrew' model={model} popupSettings={popupSettings} />
                    </td>
                </tr>
              </tbody>
            </table>
      </div>
    );
}
export default App;

Event actions for editing

Control when the In-place Editor enters edit mode by configuring the editableOn property. By default, Click is assigned. The following options are also supported:

  • Click: The editor will be opened as single click actions.
  • DblClick: The editor will be opened as double-click actions and it is not applicable for edit icon.
  • EditIconClick: Disables the editing of event action of input and allows user to edit only through edit icon.

In-place Editor get focus by pressing the tab key from previous focusable DOM element and then by pressing enter key, the editor will be opened.

In the following sample, when switching drop-down item, the selected value assigned to the editableOn property. If you changed to DblClick, the editor will open when making a double click on the input.

[Class-component]

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    inplaceEditorObj;
    dropdownObj;
    editableOnData = ['Click', 'DblClick', 'EditIconClick'];
    model = { placeholder: 'Enter some text' };
    onChange(e) {
        const editType = e.itemData.value;
        this.inplaceEditorObj.editableOn = editType;
        this.inplaceEditorObj.dataBind();
    }
    render() {
        return (<div id='container'>
          <table className="table-section">
            <tbody>
              <tr>
                  <td> EditableOn: </td>
                  <td>
                      <DropDownListComponent id='dropDown' dataSource={this.editableOnData} width='auto' value='Click' change={this.onChange = this.onChange.bind(this)} placeholder='Select edit type'/>
                  </td>
              </tr>
              <tr>
                  <td className="sample-td"> Enter your name: </td>
                  <td className="sample-td">
                      <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text; }} id='element' mode='Inline' value='Andrew' model={this.model}/>
                  </td>
                </tr>
              </tbody>
            </table>
      </div>);
    }
}
export default App;
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { EditableType, InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component {
  public inplaceEditorObj: InPlaceEditorComponent;
  public dropdownObj: DropDownListComponent;

  public editableOnData = ['Click', 'DblClick', 'EditIconClick'];
  public model = { placeholder: 'Enter some text' };

  public onChange(e: ChangeEventArgs): void {
    const editType: EditableType = e.itemData.value as EditableType;
    this.inplaceEditorObj.editableOn = editType;
    this.inplaceEditorObj.dataBind();
  }

  public render() {
    return (
      <div id='container'>
          <table className="table-section">
            <tbody>
              <tr>
                  <td> EditableOn: </td>
                  <td>
                      <DropDownListComponent id='dropDown' dataSource= {this.editableOnData} width='auto' value='Click' change={ this.onChange = this.onChange.bind(this) } placeholder='Select edit type'/>
                  </td>
              </tr>
              <tr>
                  <td  className="sample-td"> Enter your name: </td>
                  <td  className="sample-td">
                      <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text! }} id='element' mode='Inline' value='Andrew' model={this.model} />
                  </td>
                </tr>
              </tbody>
            </table>
      </div>
    );
  }
}
export default App;

[Functional-component]

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    let inplaceEditorObj;
    let dropdownObj;
    let editableOnData = ['Click', 'DblClick', 'EditIconClick'];
    let model = { placeholder: 'Enter some text' };
    function onChange(e) {
        const editType = e.itemData.value;
        inplaceEditorObj.editableOn = editType;
        inplaceEditorObj.dataBind();
    }
    return (<div id='container'>
         <table className="table-section">
          <tbody>
            <tr>
                <td> EditableOn: </td>
                <td>
                    <DropDownListComponent id='dropDown' dataSource={editableOnData} width='auto' value='Click' change={onChange = onChange.bind(this)} placeholder='Select edit type'/>
                </td>
            </tr>
            <tr>
                <td className="sample-td"> Enter your name: </td>
                <td className="sample-td">
                    <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text; }} id='element' mode='Inline' value='Andrew' model={model}/>
                </td>
              </tr>
            </tbody>
           </table>
     </div>);
}
export default App;
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { EditableType, InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App () {
  let inplaceEditorObj: InPlaceEditorComponent;
  let dropdownObj: DropDownListComponent;

  let editableOnData = ['Click', 'DblClick', 'EditIconClick'];
  let model = { placeholder: 'Enter some text' };

  function onChange(e: ChangeEventArgs): void {
    const editType: EditableType = e.itemData.value as EditableType;
    inplaceEditorObj.editableOn = editType;
    inplaceEditorObj.dataBind();
  }

    return (
    <div id='container'>
         <table className="table-section">
          <tbody>
            <tr>
                <td> EditableOn: </td>
                <td>
                    <DropDownListComponent id='dropDown' dataSource= {editableOnData} width='auto' value='Click' change={ onChange = onChange.bind(this) } placeholder='Select edit type'/>
                </td>
            </tr>
            <tr>
                <td  className="sample-td"> Enter your name: </td>
                <td  className="sample-td">
                    <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text! }} id='element' mode='Inline' value='Andrew' model={model} />
                </td>
              </tr>
            </tbody>
           </table>
     </div>
    );

}
export default App;

Action on focus out

Action to be performed when the user clicks outside the container, that means focusing out of editable content and it can be handled by the actionOnBlur property, by default Submit assigned. It also has the following options.

  • Cancel: Cancels the editing and resets the old content.
  • Submit: Submits the edited content to the server.
  • Ignore: No action is performed with this type and allows to edit multiple editors.

In the following sample, when switching drop-down item, the selected value assigned to the actionOnBlur property.

[Class-component]

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    inplaceEditorObj;
    dropdownObj;
    blurActionData = ['Submit', 'Cancel', 'Ignore'];
    model = { placeholder: 'Enter some text' };
    onChange(e) {
        const editType = e.itemData.value;
        this.inplaceEditorObj.actionOnBlur = editType;
        this.inplaceEditorObj.dataBind();
    }
    render() {
        return (<div id='container'>
          <table className="table-section">
              <tbody>
              <tr>
                  <td> ActionOnBlur: </td>
                  <td>
                      <DropDownListComponent id='dropDown' dataSource={this.blurActionData} width='auto' value='Submit' change={this.onChange = this.onChange.bind(this)} placeholder='Select blur action'/>
                  </td>
              </tr>
              <tr>
                  <td className="sample-td"> Enter your name: </td>
                  <td className="sample-td">
                      <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text; }} id='element' mode='Inline' value='Andrew' model={this.model}/>
                  </td>
                </tr>
              </tbody>
            </table>
      </div>);
    }
}
export default App;
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ActionBlur, InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component {
  public inplaceEditorObj: InPlaceEditorComponent;
  public dropdownObj: DropDownListComponent;

  public blurActionData = ['Submit', 'Cancel', 'Ignore'];
  public model = { placeholder: 'Enter some text' };

  public onChange(e: ChangeEventArgs): void {
    const editType: ActionBlur = e.itemData.value as ActionBlur;
    this.inplaceEditorObj.actionOnBlur = editType;
    this.inplaceEditorObj.dataBind();
  }

  public render() {
    return (
      <div id='container'>
          <table className="table-section">
              <tbody>
              <tr>
                  <td> ActionOnBlur: </td>
                  <td>
                      <DropDownListComponent id='dropDown' dataSource= {this.blurActionData} width='auto' value='Submit' change={ this.onChange = this.onChange.bind(this) } placeholder='Select blur action'/>
                  </td>
              </tr>
              <tr>
                  <td  className="sample-td"> Enter your name: </td>
                  <td  className="sample-td">
                      <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text! }} id='element' mode='Inline' value='Andrew' model={this.model} />
                  </td>
                </tr>
              </tbody>
            </table>
      </div>
    );
  }
}
export default App;

[Functional-component]

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    let inplaceEditorObj;
    let dropdownObj;
    let blurActionData = ['Submit', 'Cancel', 'Ignore'];
    let model = { placeholder: 'Enter some text' };
    function onChange(e) {
        const editType = e.itemData.value;
        inplaceEditorObj.actionOnBlur = editType;
        inplaceEditorObj.dataBind();
    }
    return (<div id='container'>
          <table className="table-section">
              <tbody>
              <tr>
                  <td> ActionOnBlur: </td>
                  <td>
                      <DropDownListComponent id='dropDown' dataSource={blurActionData} width='auto' value='Submit' change={onChange = onChange.bind(this)} placeholder='Select blur action'/>
                  </td>
              </tr>
              <tr>
                  <td className="sample-td"> Enter your name: </td>
                  <td className="sample-td">
                      <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text; }} id='element' mode='Inline' value='Andrew' model={model}/>
                  </td>
                </tr>
              </tbody>
            </table>
      </div>);
}
export default App;
import { ChangeEventArgs, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { ActionBlur, InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App () {
  let inplaceEditorObj: InPlaceEditorComponent;
  let dropdownObj: DropDownListComponent;

  let blurActionData = ['Submit', 'Cancel', 'Ignore'];
  let model = { placeholder: 'Enter some text' };

  function onChange(e: ChangeEventArgs): void {
    const editType: ActionBlur = e.itemData.value as ActionBlur;
    inplaceEditorObj.actionOnBlur = editType;
    inplaceEditorObj.dataBind();
  }

    return (
      <div id='container'>
          <table className="table-section">
              <tbody>
              <tr>
                  <td> ActionOnBlur: </td>
                  <td>
                      <DropDownListComponent id='dropDown' dataSource= {blurActionData} width='auto' value='Submit' change={ onChange = onChange.bind(this) } placeholder='Select blur action'/>
                  </td>
              </tr>
              <tr>
                  <td  className="sample-td"> Enter your name: </td>
                  <td  className="sample-td">
                      <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text! }} id='element' mode='Inline' value='Andrew' model={model} />
                  </td>
                </tr>
              </tbody>
            </table>
      </div>
    );
}
export default App;

Display modes

By default, In-place Editor input element highlighted with a dotted underline. To remove dotted underline from input element, add data-underline="false" attribute at In-place Editor root element.

In the following sample shows intractable and normal display modes with different samples.

[Class-component]

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    model = { placeholder: 'Enter some text' };
    render() {
        return (<div id='container'>
         <h4>Example of data-underline attribute</h4>
         <table className="table-section">
            <tbody>
             <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Intractable UI </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='default' mode='Inline' value='Andrew' model={this.model}/>
                </td>
             </tr>
             <tr>
                 <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Normal UI </td>
                 <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='element' data-underline='false' mode='Inline' value='Andrew' model={this.model}/>
                 </td>
              </tr>
              </tbody>
           </table>
     </div>);
    }
}
export default App;
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component {
  public model = { placeholder: 'Enter some text' };

  public render() {
    return (
    <div id='container'>
         <h4>Example of data-underline attribute</h4>
         <table className="table-section">
            <tbody>
             <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Intractable UI </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='default' mode='Inline' value='Andrew' model={this.model} />
                </td>
             </tr>
             <tr>
                 <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Normal UI </td>
                 <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='element' data-underline='false' mode='Inline' value='Andrew' model={this.model} />
                 </td>
              </tr>
              </tbody>
           </table>
     </div>
    );
  }
}
export default App;

[Functional-component]

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    let model = { placeholder: 'Enter some text' };
    return (<div id='container'>
          <h4>Example of data-underline attribute</h4>
          <table className="table-section">
              <tbody>
              <tr>
                  <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Intractable UI </td>
                  <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                      <InPlaceEditorComponent id='default' mode='Inline' value='Andrew' model={model}/>
                  </td>
              </tr>
              <tr>
                  <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Normal UI </td>
                  <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                      <InPlaceEditorComponent id='element' data-underline='false' mode='Inline' value='Andrew' model={model}/>
                  </td>
                </tr>
                </tbody>
            </table>
      </div>);
}
export default App;
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App (){
  let model = { placeholder: 'Enter some text' };

    return (
      <div id='container'>
          <h4>Example of data-underline attribute</h4>
          <table className="table-section">
              <tbody>
              <tr>
                  <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Intractable UI </td>
                  <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                      <InPlaceEditorComponent id='default' mode='Inline' value='Andrew' model={model} />
                  </td>
              </tr>
              <tr>
                  <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Normal UI </td>
                  <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                      <InPlaceEditorComponent id='element' data-underline='false' mode='Inline' value='Andrew' model={model} />
                  </td>
                </tr>
                </tbody>
            </table>
      </div>
    );
  
}
export default App;

See Also