Dynamically move input to edit mode in React In-place Editor component

30 Jul 2021 / 1 minute to read

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.

Source

Preview

App.tsx

App.jsx

index.jsx

import { ChangeEventArgs, 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<{},{}> {
  public inplaceEditorObj: InPlaceEditorComponent;
  public checkboxObj: CheckBoxComponent;

  public model = { placeholder: 'Enter some text' };

  public onChange(e: ChangeEventArgs): void {
    (this.inplaceEditorObj as any).enableEditMode = e.checked;
    this.inplaceEditorObj.dataBind();
  }

  public render() {
    return (
    <div id='container'>
        <table className="table-section">
            <tr>
                <td> EnableEditMode: </td>
                <td>
                  <CheckBoxComponent id='enable' label='Enable' checked={true} change={ this.onChange = this.onChange.bind(this) }/>
                </td>
            </tr>
            <tr>
                <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} />
                </td>
            </tr>
        </table>
     </div>
    );
  }
}

export default App;

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() {
        super(...arguments);
        this.model = { placeholder: 'Enter some text' };
    }
    onChange(e) {
        this.inplaceEditorObj.enableEditMode = e.checked;
        this.inplaceEditorObj.dataBind();
    }
    render() {
        return (<div id='container'>
        <table className="table-section">
            <tr>
                <td> EnableEditMode: </td>
                <td>
                  <CheckBoxComponent id='enable' label='Enable' checked={true} change={this.onChange = this.onChange.bind(this)}/>
                </td>
            </tr>
            <tr>
                <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}/>
                </td>
            </tr>
        </table>
     </div>);
    }
}
export default App;

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));