Buttons in React Inplace editor component

20 Feb 202614 minutes to read

The In-place Editor provides save and cancel actions through customizable buttons. The saveButton and cancelButton properties accept ButtonModel objects for customizing button appearance and behavior.

Control button visibility by setting the showButtons property to true or false.

When buttons are hidden, value submission is handled through alternative methods:

• actionOnBlur: Clicking outside the editor triggers the submit action based on this property’s configuration.
• submitOnEnter: Pressing the Enter key triggers the submit action when this property is set to true.

In the following sample, the content and cssClass properties are assigned to the saveButton and cancelButton properties to customize button appearance. Use the checkbox to dynamically show or hide the buttons.

To prevent a button from rendering in the DOM, pass an empty object {} to the saveButton or cancelButton property.

For more details about buttons, refer this documentation section.

[Class-component]

app.jsx

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;

app.tsx

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

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;

app.tsx

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;

See Also

• In-place editor buttons