React
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Getting started with React In-place Editor component

02 Aug 2021 / 5 minutes to read

This section briefly explains about how to create a simple In-place Editor and demonstrate the basic usage of the In-place Editor component.

Dependencies

The following is the list of dependencies required to use the In-place Editor component in your application.

Copied to clipboard
|-- @syncfusion/ej2-react-inplace-editor
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-buttons
    |-- @syncfusion/ej2-calendars
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-richtexteditor

Set up your development environment

Before starting, need to install Create-react-app command line interface into your machine globally by using following command.

Copied to clipboard
npm install -g create-react-app

Create a new project using create-react-app command as follows

Copied to clipboard
create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart
Copied to clipboard
create-react-app quickstart

cd quickstart

Install the below required dependency package in order to use the In-place Editor component in your application.

Copied to clipboard
npm install @syncfusion/ej2-react-inplace-editor –save

The above package installs In-place Editor dependencies which are required to render the In-place Editor component in React environment.

  • In-place Editor CSS files are available in the ej2-react-inplace-editor package folder. Import the In-place Editor component’s required CSS references as follows in src/App.css.
Copied to clipboard
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-react-inplace-editor/styles/material.css';

Add the In-place Editor with Textbox

By default, Essential JS2 React TextBox component is rendered in In-place Editor with type property sets as Text.

  • Import the In-place Editor component to your src/App.tsx file using following code.
Copied to clipboard
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';

class App extends React.Component {
  public model = { placeholder: 'Enter employee name' };
  public render() {
return (
 <InPlaceEditorComponent id='element' model={this.model} type='Text' value='Andrew'/>
);
  }
}

export default App;

Configuring DropDownList

You can render Essential JS 2 React DropDownList by changing type property as DropDownList and configure its properties and methods using model property.

In the below sample, type and model values are configured to render the DropDownList component.

Copied to clipboard
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';

class App extends React.Component {
  public genderData = ['Male', 'Female'];
  public model = { placeholder: 'Select gender', dataSource: this.genderData };
  public render() {
return (
 <InPlaceEditorComponent id='element' model={this.model} type='DropDownList' mode='Inline'/>
);
  }
}

export default App;

Integrate DatePicker

You can render Essential JS2 DatePicker by changing type property as Date and also configure its properties and methods using model property.

In the below sample, type and model values are configured to render the DatePicker component.

Copied to clipboard
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';

class App extends React.Component {
  public model = { showTodayButton: true };
  public value = new Date('04/12/2018');
  public render() {
return (
 <InPlaceEditorComponent id='element' model={this.model} type='Date' value={this.value}/>
);
  }
}

export default App;

Run the application

  • Run the application in the browser using the following command.
Copied to clipboard
npm start

Output will be as follows:

Source
Preview
App.tsx
App.jsx
index.jsx
Copied to clipboard
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component {
  public genderData = ['Male', 'Female'];
  public dateModel = { showTodayButton: true, placeholder: 'Select date of birth' };
  public dateValue = new Date('04/12/2018');
  public elementModel = { placeholder: 'Enter your name' };
  public genderModel = {  dataSource: this.genderData, placeholder: 'Select gender' };
  public render() {
return (
  <div id='container'>
  <div className="control-group">
       <div className="e-heading">
        <h3> Modify Basic Details </h3>
        </div>
        <table>
            <tr>
                <td>Name</td>
                <td className='left'>
                    <InPlaceEditorComponent id='element' mode='Inline' value='Andrew' model={this.elementModel}/>
                </td>
            </tr>
            <tr>
                <td>Date of Birth</td>
                <td className='left'>
                    <InPlaceEditorComponent id='dateofbirth' type="Date" mode='Inline' value={this.dateValue} model={this.dateModel}/>
                </td>
            </tr>
            <tr>
                <td>Gender</td>
                <td className='left'>
                    <InPlaceEditorComponent id='gender' type="DropDownList" mode='Inline' value='Male' model={this.genderModel}/>
                </td>
            </tr>
        </table>
    </div>
    </div>
);
  }
}

export default App;
Copied to clipboard
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.genderData = ['Male', 'Female'];
        this.dateModel = { showTodayButton: true, placeholder: 'Select date of birth' };
        this.dateValue = new Date('04/12/2018');
        this.elementModel = { placeholder: 'Enter your name' };
        this.genderModel = { dataSource: this.genderData, placeholder: 'Select gender' };
    }
    render() {
        return (<div id='container'>
  <div className="control-group">
       <div className="e-heading">
        <h3> Modify Basic Details </h3>
        </div>
        <table>
            <tr>
                <td>Name</td>
                <td className='left'>
                    <InPlaceEditorComponent id='element' mode='Inline' value='Andrew' model={this.elementModel}/>
                </td>
            </tr>
            <tr>
                <td>Date of Birth</td>
                <td className='left'>
                    <InPlaceEditorComponent id='dateofbirth' type="Date" mode='Inline' value={this.dateValue} model={this.dateModel}/>
                </td>
            </tr>
            <tr>
                <td>Gender</td>
                <td className='left'>
                    <InPlaceEditorComponent id='gender' type="DropDownList" mode='Inline' value='Male' model={this.genderModel}/>
                </td>
            </tr>
        </table>
    </div>
    </div>);
    }
}
export default App;
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

Submitting data to the server (save)

You can submit editor value to server by configuring the url, adaptor and primaryKey property.

Property Usage
url Gets the url for server submit action.
adaptor Specifies the adaptor type that are used by DataManager to communicate with DataSource.
primarykey Defines the unique primary key of editable field which can be used for saving data in data-base.

primaryKey property is mandatory. If it’s not set, edited data are not sent to the server.

Refresh with modified value

The edited data is submitted to the server and you can see the new values getting reflected in the In-place Editor.

Source
Preview
App.tsx
App.jsx
index.jsx
Copied to clipboard
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component<{}, {}> {
public frameWorkList = ['Andrew Fuller', 'Janet Leverling', 'Laura Callahan', 'Margaret Hamilt', 'Michael Suyama', 'Nancy Davloio', 'Robert King'];
public model = {  dataSource: this.frameWorkList, placeholder: 'Select employee', popupHeight: '200px' };
public url = "https://ej2services.syncfusion.com/development/web-services/api/Editor/UpdateData";

public actionSuccess(e: any) {
const newEle = document.getElementById('newValue') as HTMLElement;
const oldEle = document.getElementById('oldValue') as HTMLElement;
oldEle.textContent = newEle.textContent;
newEle.textContent = e.value;
}

public render() {
  return (
  <div id='container'>
  <div className="control-group">
        Best Employee of the year: <InPlaceEditorComponent id='element' type="DropDownList" mode='Inline' value='Andrew Fuller' name='Employee' url={this.url} primaryKey="Employee" adaptor="UrlAdaptor" model={this.model} actionSuccess={this.actionSuccess} />
   </div>
   <table style={{'margin':'auto','width':'50%'}}>
       <tr>
          <td style={{textAlign: 'left'}}>
             Old Value :
          </td>
          <td id="oldValue" style={{textAlign: 'left'}}/>
       </tr>
       <tr>
           <td style={{textAlign: 'left'}}>
                New Value :
           </td>
           <td id="newValue" style={{textAlign: 'left'}}>
                Andrew Fuller
           </td>
        </tr>
     </table>
   </div>
  );
}
}
export default App;
Copied to clipboard
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.frameWorkList = ['Andrew Fuller', 'Janet Leverling', 'Laura Callahan', 'Margaret Hamilt', 'Michael Suyama', 'Nancy Davloio', 'Robert King'];
        this.model = { dataSource: this.frameWorkList, placeholder: 'Select employee', popupHeight: '200px' };
        this.url = "https://ej2services.syncfusion.com/development/web-services/api/Editor/UpdateData";
    }
    actionSuccess(e) {
        const newEle = document.getElementById('newValue');
        const oldEle = document.getElementById('oldValue');
        oldEle.textContent = newEle.textContent;
        newEle.textContent = e.value;
    }
    render() {
        return (<div id='container'>
  <div className="control-group">
        Best Employee of the year: <InPlaceEditorComponent id='element' type="DropDownList" mode='Inline' value='Andrew Fuller' name='Employee' url={this.url} primaryKey="Employee" adaptor="UrlAdaptor" model={this.model} actionSuccess={this.actionSuccess}/>
   </div>
   <table style={{ 'margin': 'auto', 'width': '50%' }}>
       <tr>
          <td style={{ textAlign: 'left' }}>
             Old Value :
          </td>
          <td id="oldValue" style={{ textAlign: 'left' }}/>
       </tr>
       <tr>
           <td style={{ textAlign: 'left' }}>
                New Value :
           </td>
           <td id="newValue" style={{ textAlign: 'left' }}>
                Andrew Fuller
           </td>
        </tr>
     </table>
   </div>);
    }
}
export default App;
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

See Also

Previous
Next