Search results

Configuration

Rendering modes

This section explains the rendering modes supported by the In-place Editor. Possible rendering modes are given in below.

  • Popup
  • Inline

By default, component will be rendered with Popup mode, when opening an editor.

  • For Popup mode, editable container displays as like tooltip or popover above the element.

  • For Inline mode, editable container will be displayed instead of the popup element. To render Inline mode while opening the editor, specify mode as Inline.

In the following sample, the In-place Editor renders with Inline mode. You can dynamically switch to another mode by changing the drop-down item value.

Source
Preview
index.tsx
index.html
App.css.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React In-place Editor Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #container {
            visibility: visible;
        }

        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .table-section {
            margin: 0 auto;
        }

        tr td:first-child {
            text-align: right;
            padding-right: 20px;
        }

        .sample-td {
            padding-top: 10px;
            min-width: 230px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import './App.css';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.modeData = ['Inline', 'Popup'];
        this.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;

Pop-up customization

In-place Editor popup mode can be customized by using the title and model properties in popupSettings API.

Popup mode rendered by using the Essential JS2 React Tooltip component, so you can use tooltip properties and events to customize the behavior of popup via the model property of popupSettings API.

For more details, refer the tooltip documentation section.

In the following sample, popup title and position customized using the popupSettings property. All possible tooltip position data configured in the drop-down, if we change drop down item, selected value bound to model property and applied it to Tooltip component. Tooltip have following position options.

  • TopLeft
  • TopCenter
  • TopRight
  • BottomLeft
  • BottomCenter
  • BottomRight
  • LeftTop
  • LeftCenter
  • LeftBottom
  • RightTop
  • RightCenter
  • RightBottom
Source
Preview
index.tsx
index.html
App.css.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React In-place Editor Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #container {
            display: flex;
            justify-content: center;
            visibility: visible;
        }

        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .table-section {
            margin: 0 auto;
        }

        .sample-td {
            padding-top: 150px;
        }

        .edit-heading {
            padding-right: 20px;
        }
    </style>
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.positionData = ['TopLeft', 'TopCenter', 'TopRight', 'BottomLeft', 'BottomCenter', 'BottomRight', 'LeftTop', 'LeftCenter', 'LeftBottom', 'RightTop', 'RightCenter', 'RightBottom'];
        this.model = { placeholder: 'Enter some text' };
        this.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;

Event actions for editing

The event action of the editor that enable in the edit mode based on 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.

Source
Preview
index.tsx
index.html
App.css.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React In-place Editor Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #container {
            visibility: visible;
        }

        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .table-section {
            margin: 0 auto;
        }

        tr td:first-child {
            text-align: right;
            padding-right: 20px;
        }

        .sample-td {
            padding-top: 10px;
            min-width: 230px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.editableOnData = ['Click', 'DblClick', 'EditIconClick'];
        this.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;

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.

Source
Preview
index.tsx
index.html
App.css.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React In-place Editor Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #container {
            visibility: visible;
        }

        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .table-section {
            margin: 0 auto;
        }

        tr td:first-child {
            text-align: right;
            padding-right: 20px;
        }

        .sample-td {
            padding-top: 10px;
            min-width: 230px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.blurActionData = ['Submit', 'Cancel', 'Ignore'];
        this.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;

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.

Source
Preview
index.tsx
index.html
App.css.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React In-place Editor Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #container {
            visibility: visible;
        }

        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .table-section {
            margin: 0 auto;
        }

        td {
            padding: 20px 0;
            min-width: 230px;
            height: 100px;
        }

        .control-title {
            font-weight: 600;
            padding-right: 20px;
            text-align: right;
        }

        h4 {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.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;

See Also