Search results

Dynamically move input to edit mode

At component initial load, if you want to open editor state without interacting In-place Editor input element, it can be achieved by configuring the enableEditMode property to true.

In the following sample, editor opened at initial load and when toggling a checkbox, it will remove or open the editor.

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">

    <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="//" rel="stylesheet" />
    <script src=""></script>
    <script src="systemjs.config.js"></script>
        #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;
    <div id='root'>
        <div id='loader'>Loading....</div>
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';
class App extends React.Component {
    constructor() {
        this.model = { placeholder: 'Enter some text' };
    onChange(e) {
        this.inplaceEditorObj.enableEditMode = e.checked;
    render() {
        return (<div id='container'>
        <table className="table-section">
                <td> EnableEditMode: </td>
                  <CheckBoxComponent id='enable' label='Enable' checked={true} change={this.onChange = this.onChange.bind(this)}/>
                <td className="sample-td"> Enter your name: </td>
                <td className="sample-td">
                  <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text; }} id='dynamicEdit' mode='Inline' value='Andrew' enableEditMode={true} actionOnBlur='Ignore' model={this.model}/>
export default App;