Buttons in React Inplace editor component

8 Aug 202313 minutes to read

The In-place Editor has an action for save and cancel using buttons. The saveButton and cancelButton properties accepts the ButtonModel objects for customizing the save and cancel button properties.

Buttons can be show or hide by setting a boolean value to the showButtons property.

Without buttons value actions will be performed by the following way.

actionOnBlur: By clicking out-side of the editor component it will get focus out and perform action based on this property value.
submitOnEnter: Pressing Enter key it performs the submit action, when this property set to true.

In the following sample, the content and cssClass properties of Button value assigned to the saveButton and cancelButton properties to customize its appearance. Also check or uncheck a checkbox buttons render or removed from the editor.

To restrict either save or cancel button rendering into a DOM, simply pass empty object {} in the saveButton or cancelButton properties.

For more details about buttons, refer this documentation section.

[Class-component]

app.jsx
app.tsx
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from "react";
class App extends React.Component {
    inplaceEditorObj;
    checkboxObj;
    model = { placeholder: 'Enter some text' };
    saveButton = { content: 'Ok', cssClass: 'e-outline' };
    cancelButton = { content: 'Cancel', cssClass: 'e-outline' };
    onChange(e) {
        this.inplaceEditorObj.showButtons = e.checked;
        this.inplaceEditorObj.dataBind();
    }
    render() {
        return (<div id='container'>
          <table className="table-section">
          <tbody>
              <tr>
                  <td> ShowButtons: </td>
                  <td>
                      <CheckBoxComponent id='enableBtn' checked={true} label='Show' 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='element' mode='Inline' value='Andrew' model={this.model} saveButton={this.saveButton} cancelButton={this.cancelButton}/>
                  </td>
                </tr>
              </tbody>
            </table>
      </div>);
    }
}
;
export default App;
import { ChangeEventArgs, CheckBoxComponent  } from '@syncfusion/ej2-react-buttons';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from "react";
class App extends React.Component<{}, {}> {
  public inplaceEditorObj: InPlaceEditorComponent;
  public checkboxObj: CheckBoxComponent;

  public model = { placeholder: 'Enter some text' };
  public saveButton = { content: 'Ok', cssClass: 'e-outline' };
  public cancelButton = { content: 'Cancel', cssClass: 'e-outline' };

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

  public render() {
    return (
      <div id='container'>
          <table className="table-section">
          <tbody>
              <tr>
                  <td> ShowButtons: </td>
                  <td>
                      <CheckBoxComponent id='enableBtn' checked={true} label='Show' 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='element' mode='Inline' value='Andrew' model={this.model} saveButton={this.saveButton} cancelButton={this.cancelButton}/>
                  </td>
                </tr>
              </tbody>
            </table>
      </div>
    );
  }
};
export default App;

[Functional-component]

app.jsx
app.tsx
import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from "react";
function App() {
    let inplaceEditorObj;
    let checkboxObj;
    let model = { placeholder: 'Enter some text' };
    let saveButton = { content: 'Ok', cssClass: 'e-outline' };
    let cancelButton = { content: 'Cancel', cssClass: 'e-outline' };
    function onChange(e) {
        inplaceEditorObj.showButtons = e.checked;
        inplaceEditorObj.dataBind();
    }
    return (<div id='container'>
          <table className="table-section">
          <tbody>
              <tr>
                  <td> ShowButtons: </td>
                  <td>
                      <CheckBoxComponent id='enableBtn' checked={true} label='Show' 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='element' mode='Inline' value='Andrew' model={model} saveButton={saveButton} cancelButton={cancelButton}/>
                  </td>
                </tr>
              </tbody>
            </table>
      </div>);
}
;
export default App;
import { ChangeEventArgs, CheckBoxComponent  } from '@syncfusion/ej2-react-buttons';
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from "react";
function App () {
  let inplaceEditorObj: InPlaceEditorComponent;
  let checkboxObj: CheckBoxComponent;

  let model = { placeholder: 'Enter some text' };
  let saveButton = { content: 'Ok', cssClass: 'e-outline' };
  let cancelButton = { content: 'Cancel', cssClass: 'e-outline' };

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

    return (
      <div id='container'>
          <table className="table-section">
          <tbody>
              <tr>
                  <td> ShowButtons: </td>
                  <td>
                      <CheckBoxComponent id='enableBtn' checked={true} label='Show' 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='element' mode='Inline' value='Andrew' model={model} saveButton={saveButton} cancelButton={cancelButton}/>
                  </td>
                </tr>
              </tbody>
            </table>
      </div>
    );

};
export default App;

Buttons in React Inplace editor component

See Also