Dynamic edit mode in React Inplace editor component

24 Jan 202311 minutes 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.

[Class-component]

app.jsx

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 {
    inplaceEditorObj;
    checkboxObj;
    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;

app.tsx

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">
        <tbody>
            <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>
            </tbody>
        </table>
     </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx

import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';
function App() {
    let inplaceEditorObj;
    let checkboxObj;
    let model = { placeholder: 'Enter some text' };
    function onChange(e) {
        inplaceEditorObj.enableEditMode = e.checked;
        inplaceEditorObj.dataBind();
    }
    return (<div id='container'>
        <table className="table-section">
            <tr>
                <td> EnableEditMode: </td>
                <td>
                  <CheckBoxComponent id='enable' label='Enable' checked={true} change={onChange = onChange.bind(this)}/>
                </td>
            </tr>
            <tr>
                <td className="sample-td"> Enter your name: </td>
                <td className="sample-td">
                  <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text; }} id='dynamicEdit' mode='Inline' value='Andrew' enableEditMode={true} actionOnBlur='Ignore' model={model}/>
                </td>
            </tr>
        </table>
     </div>);
}
export default App;

app.tsx

import { ChangeEventArgs, CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';

function App () {
  let inplaceEditorObj: InPlaceEditorComponent;
  let checkboxObj: CheckBoxComponent;

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

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

    return (
    <div id='container'>
        <table className="table-section">
            <tr>
                <td> EnableEditMode: </td>
                <td>
                  <CheckBoxComponent id='enable' label='Enable' checked={true} change={ onChange = onChange.bind(this) }/>
                </td>
            </tr>
            <tr>
                <td className="sample-td"> Enter your name: </td>
                <td className="sample-td">
                  <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text! }} id='dynamicEdit' mode='Inline' value='Andrew' enableEditMode={true} actionOnBlur='Ignore' model={model} />
                </td>
            </tr>
        </table>
     </div>
    );

}

export default App;