Integration in React Inplace editor component

20 Feb 20268 minutes to read

The In-place Editor supports integrating custom HTML5 input components using the template property. The template can be specified as either a string or a CSS query selector.

As a string

Provide the template as an HTML string. The input is rendered as an HTML template.

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

As a selector

Provide the template as a CSS query selector that references an element ID. The selector retrieves the template content from the corresponding DOM element.

template: "#date"

In template mode, the In-place Editor does not automatically handle the value property. Before submitting data to the server, manually update the value property in the actionBegin event handler; otherwise, an empty string will be sent. The following sample demonstrates how to update the value before server submission.

[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=>
            <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=>
            <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;