Search results

Integrate HTML5 Components in React InPlaceEditor component

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.

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

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;
import { InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
import './App.css';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.inVal = '2018-05-23';
    }
    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;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));