Getting Started

8 Aug 202319 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.

|-- @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.

```bash
npm install -g create-react-app
```

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

<div class='tsx'>

```bash
create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart

```

</div>

<div class='jsx'>

```

create-react-app quickstart

cd quickstart

```

</div>

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

```bash
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.

    @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.

    import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
    import * as React from 'react';
    import './App.css';
  
    function App() {
      const model: object = { placeholder: 'Enter employee name' };
  
      return (
        <InPlaceEditorComponent id='element' model={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.

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

function App() {
  const genderData: string[] = ['Male', 'Female'];
  const model: object = { placeholder: 'Select gender', dataSource: genderData };

  return (
    <InPlaceEditorComponent id='element' model={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.

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

function App() {
  const model: object = { showTodayButton: true };
  const value: Date = new Date('04/12/2018');

  return (
    <InPlaceEditorComponent id='element' model={model} type='Date' value={value}/>
  );
}

export default App;

Run the application

• Run the application in the browser using the following command.

  npm start
  

Output will be as follows:

app.jsx

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    const genderData = ['Male', 'Female'];
    const dateModel = { showTodayButton: true, placeholder: 'Select date of birth' };
    const dateValue = new Date('04/12/2018');
    const elementModel = { placeholder: 'Enter your name' };
    const genderModel = { dataSource: genderData, placeholder: 'Select gender' };
    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={elementModel}/>
                  </td>
              </tr>
              <tr>
                  <td>Date of Birth</td>
                  <td className='left'>
                      <InPlaceEditorComponent id='dateofbirth' type="Date" mode='Inline' value={dateValue} model={dateModel}/>
                  </td>
              </tr>
              <tr>
                  <td>Gender</td>
                  <td className='left'>
                      <InPlaceEditorComponent id='gender' type="DropDownList" mode='Inline' value='Male' model={genderModel}/>
                  </td>
              </tr>
          </table>
      </div>
      </div>);
}
export default App;

app.tsx

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App() {
  const genderData: string[] = ['Male', 'Female'];
  const dateModel: object = { showTodayButton: true, placeholder: 'Select date of birth' };
  const dateValue: Date = new Date('04/12/2018');
  const elementModel: object = { placeholder: 'Enter your name' };
  const genderModel: object = {  dataSource: genderData, placeholder: 'Select gender' };

  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={elementModel}/>
                  </td>
              </tr>
              <tr>
                  <td>Date of Birth</td>
                  <td className='left'>
                      <InPlaceEditorComponent id='dateofbirth' type="Date" mode='Inline' value={dateValue} model={dateModel}/>
                  </td>
              </tr>
              <tr>
                  <td>Gender</td>
                  <td className='left'>
                      <InPlaceEditorComponent id='gender' type="DropDownList" mode='Inline' value='Male' model={genderModel}/>
                  </td>
              </tr>
          </table>
      </div>
      </div>
  );
}

export default App;

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.

app.jsx

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    const frameWorkList = ['Andrew Fuller', 'Janet Leverling', 'Laura Callahan', 'Margaret Hamilt', 'Michael Suyama', 'Nancy Davloio', 'Robert King'];
    const model = { dataSource: frameWorkList, placeholder: 'Select employee', popupHeight: '200px' };
    const url = "https://ej2services.syncfusion.com/development/web-services/api/Editor/UpdateData";
    const actionSuccess = (e) => {
        const newEle = document.getElementById('newValue');
        const oldEle = document.getElementById('oldValue');
        oldEle.textContent = newEle.textContent;
        newEle.textContent = e.value;
    };
    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={url} primaryKey="Employee" adaptor="UrlAdaptor" model={model} actionSuccess={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;

app.tsx

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

function App() {

  const frameWorkList: string[] = ['Andrew Fuller', 'Janet Leverling', 'Laura Callahan', 'Margaret Hamilt', 'Michael Suyama', 'Nancy Davloio', 'Robert King'];
  const model: object = {  dataSource: frameWorkList, placeholder: 'Select employee', popupHeight: '200px' };
  const url: string = "https://ej2services.syncfusion.com/development/web-services/api/Editor/UpdateData";

  const 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;
  }

  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={url} primaryKey="Employee" adaptor="UrlAdaptor" model={model} actionSuccess={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;

See Also

• Types of rendering the editor