Integration in React Inplace editor component

24 Jan 20238 minutes to read

The In-place Editor supports adding HTML5 input components using the template property. The Template property can be given as either a string or a query selector.

As a string

The HTML element tag can be given as a string for the template property. Here, the input is rendered as an HTML template.

template: "<div><input type='text' id='name'></input></div>"

As a selector

The template property also allows getting template content through query selector. Here, the input wrapper element ‘ID’ attribute is specified in the template.

template: "#date"

Template mode, the value property not handled by the In-place Editor component. So, before sending a value to the server, you need to modify at actionBegin event, otherwise, an empty string will pass. In the following template sample, before submitting a data to the server, event argument and value property content updated in the actionBegin event handler.

[Class-component]

app.jsx

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    inVal = '2018-05-23';
    inplaceEditorObj;
    actionBegin(e) {
        const value = this.inplaceEditorObj.element.querySelector('#date').value;
        this.inplaceEditorObj.value = value;
        e.value = value;
    }
    render() {
        return (<div>
        <div id='container'>
            <span className="content-title"> Select date: </span>
            <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text; }} id='datepicker' mode='Inline' template='#date' value='2018-05-23' actionBegin={this.actionBegin = this.actionBegin.bind(this)}/>
        </div>
        <div id='html-template' style={{ display: "none" }}>
            <input id="date" defaultValue={this.inVal} type="date"/>
        </div>
     </div>);
    }
}
export default App;

app.tsx

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

class App extends React.Component<{},{}> {
  public inVal: string = '2018-05-23';
  public inplaceEditorObj: InPlaceEditorComponent;
  public actionBegin(e: ActionBeginEventArgs): void {
    const value: string = (this.inplaceEditorObj.element.querySelector('#date') as any).value;
    this.inplaceEditorObj.value = value;
    (e as any).value = value;
  }
  public render() {
    return (
      <div>
        <div id='container'>
            <span className="content-title"> Select date: </span>
            <InPlaceEditorComponent ref={(text) => { this.inplaceEditorObj = text! }} id='datepicker' mode='Inline' template='#date' value='2018-05-23' actionBegin={ this.actionBegin = this.actionBegin.bind(this) } />
        </div>
        <div id='html-template' style={ { display: "none" } }>
            <input id="date" defaultValue= { this.inVal } type="date" />
        </div>
     </div>
    );
  }
}

export default App;

[Functional-component]

app.jsx

import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
function App() {
    let inVal = '2018-05-23';
    let inplaceEditorObj;
    function actionBegin(e) {
        const value = inplaceEditorObj.element.querySelector('#date').value;
        inplaceEditorObj.value = value;
        e.value = value;
    }
    return (<div>
        <div id='container'>
            <span className="content-title"> Select date: </span>
            <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text; }} id='datepicker' mode='Inline' template='#date' value='2018-05-23' actionBegin={actionBegin = actionBegin.bind(this)}/>
        </div>
        <div id='html-template' style={{ display: "none" }}>
            <input id="date" defaultValue={inVal} type="date"/>
        </div>
     </div>);
}
export default App;

app.tsx

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

function App () {
  let inVal: string = '2018-05-23';
  let inplaceEditorObj: InPlaceEditorComponent;
  function actionBegin(e: ActionBeginEventArgs): void {
    const value: string = (inplaceEditorObj.element.querySelector('#date') as any).value;
    inplaceEditorObj.value = value;
    (e as any).value = value;
  }

    return (
      <div>
        <div id='container'>
            <span className="content-title"> Select date: </span>
            <InPlaceEditorComponent ref={(text) => { inplaceEditorObj = text! }} id='datepicker' mode='Inline' template='#date' value='2018-05-23' actionBegin={ actionBegin = actionBegin.bind(this) } />
        </div>
        <div id='html-template' style={ { display: "none" } }>
            <input id="date" defaultValue= { inVal } type="date" />
        </div>
     </div>
    );

}

export default App;