Disable edit mode in React Inplace editor component

24 Jan 202310 minutes to read

The edit mode of In-place Editor can be disabled by setting the disabled property value to true. In the following sample, when check or uncheck the checkbox, In-place Editor component will disable or enable the edit mode.

[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.disabled = e.checked;
        this.inplaceEditorObj.dataBind();
    }
    render() {
        return (<div id='container'>
        <table className="table-section">
            <tr>
                <td> Disabled: </td>
                <td>
                  <CheckBoxComponent id='enable' label='Disable' checked={false} 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='disableEdit' mode='Inline' value='Andrew' 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).disabled = e.checked;
    this.inplaceEditorObj.dataBind();
  }

  public render() {
    return (
    <div id='container'>
        <table className="table-section">
        <tbody>
            <tr>
                <td> Disabled: </td>
                <td>
                  <CheckBoxComponent id='enable' label='Disable' checked={false} 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='disableEdit' mode='Inline' value='Andrew' 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.disabled = e.checked;
        inplaceEditorObj.dataBind();
    }
    return (<div id='container'>
        <table className="table-section">
            <tr>
                <td> Disabled: </td>
                <td>
                  <CheckBoxComponent id='enable' label='Disable' checked={false} 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='disableEdit' mode='Inline' value='Andrew' 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).disabled = e.checked;
    inplaceEditorObj.dataBind();
  }

    return (
    <div id='container'>
        <table className="table-section">
            <tr>
                <td> Disabled: </td>
                <td>
                  <CheckBoxComponent id='enable' label='Disable' checked={false} 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='disableEdit' mode='Inline' value='Andrew' model={model} />
                </td>
            </tr>
        </table>
     </div>
    );

}

export default App;