Search results

List of Components in React In-place Editor component

20 Apr 2021 / 4 minutes to read

In-place Editor renders, various components based on type property and it have built-in, injectable components. To use injectable components need to inject required modules into In-place Editor. By default type property set as Text and render the TextBox.

Below table explains Injectable components module name and Built-in components and their types.

Injectable Components Built in Components
AutoComplete (AutoComplete) TextBox (Text)
ComboBox (ComboBox) DatePicker (Date)
MultiSelect (MultiSelect) DateTimePicker (DateTime)
TimePicker (Time) DropDownList (DropDownList)
DateRangePicker (DateRange) MaskedTextBox (Mask)
Slider (Slider) NumericTextBox (Numeric)
Rte (RTE)
ColorPicker (Color)

In the below sample, built-in and injectable based In-place Editor components are rendered.

Source
Preview
App.tsx
App.jsx
index.jsx
Copied to clipboard
import { AutoComplete, ColorPicker, ComboBox, Inject, InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { DateRangePicker, MultiSelect, Rte, Slider, TimePicker } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';

class App extends React.Component<{}, {}> {
  public frameWorkList = ['Android', 'JavaScript', 'jQuery', 'TypeScript', 'Angular', 'React', 'Vue', 'Ionic'];
  public dateModel = { placeholder: 'Select date' };
  public dateValue = new Date('11/23/2018');
  public dateTimeValue = new Date('11/23/2018 12:30 PM');
  public dropdownModel = { dataSource: this.frameWorkList, placeholder: 'Select frameworks' };
  public maskModel = { mask: '000-000-000' };
  public numericModel = { placeholder: 'Enter number' };
  public textboxModel = { placeholder: 'Enter some text' };
  public dateRangePickerValue = [new Date('11/12/2018'), new Date('11/15/2018')];
  public rteModel = { placeholder: 'Enter your content here' };

  public render() {
    return (
    <div id='container'>
        <h3> Built-in components </h3>
        <table className="table-section">
        <tbody>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DatePicker </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='date' mode='Inline' type='Date' value={this.dateValue} model={this.dateModel}/>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DateTimePicker </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='dateTime' mode='Inline' type='DateTime' value={this.dateTimeValue} model={this.dateModel}/>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DropDownList </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='dropDowns' mode='Inline' type='DropDownList' value='Android' model={this.dropdownModel}/>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> MaskedTextBox </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='masked' mode='Inline' type='Mask' value='123-345-678' model={this.maskModel}/>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> NumericTextBox </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='numeric' mode='Inline' type='Numeric' value={10} model={this.numericModel}/>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> TextBox </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='textbox' mode='Inline' type='Text' value='Andrew' model={this.textboxModel}/>
                </td>
            </tr>
            </tbody>
        </table>
        <h3> Injectable Components </h3>
        <table className="table-section">
          <tbody>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> AutoComplete </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='autoComplete' mode='Inline' type='AutoComplete' value='Android' model={this.dropdownModel} >
                    <Inject services={[AutoComplete]} />
                    </InPlaceEditorComponent>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> ColorPicker </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='color' mode='Inline' type='Color' value='#81aefd'>
                    <Inject services={[ColorPicker]} />
                    </InPlaceEditorComponent>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> ComboBox </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='comboBox' mode='Inline' type='ComboBox' value='Android' model={this.dropdownModel} >
                    <Inject services={[ComboBox]} />
                    </InPlaceEditorComponent>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DateRangePicker </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='dateRange' mode='Inline' type='DateRange' value={this.dateRangePickerValue} model={this.dateModel} >
                    <Inject services={[DateRangePicker]} />
                    </InPlaceEditorComponent>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> MultiSelect </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='multiSelect' mode='Inline' type='MultiSelect' value='Android' model={this.dropdownModel} >
                    <Inject services={[MultiSelect]} />
                    </InPlaceEditorComponent>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> RTE </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='rte' mode='Inline' type='RTE' value='<p>Enter your content here</p>' model={this.rteModel} >
                    <Inject services={[Rte]} />
                    </InPlaceEditorComponent>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Slider </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='slider' mode='Inline' type='Slider' value={20}>
                    <Inject services={[Slider]} />
                    </InPlaceEditorComponent>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> TimePicker </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='time' mode='Inline' type='Time' value={this.dateValue} model={this.dateModel} >
                    <Inject services={[TimePicker]} />
                    </InPlaceEditorComponent>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    );
  }
};
export default App;
Copied to clipboard
import { AutoComplete, ColorPicker, ComboBox, Inject, InPlaceEditorComponent } from '@syncfusion/ej2-react-inplace-editor';
import { DateRangePicker, MultiSelect, Rte, Slider, TimePicker } from '@syncfusion/ej2-react-inplace-editor';
import * as React from 'react';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.frameWorkList = ['Android', 'JavaScript', 'jQuery', 'TypeScript', 'Angular', 'React', 'Vue', 'Ionic'];
        this.dateModel = { placeholder: 'Select date' };
        this.dateValue = new Date('11/23/2018');
        this.dateTimeValue = new Date('11/23/2018 12:30 PM');
        this.dropdownModel = { dataSource: this.frameWorkList, placeholder: 'Select frameworks' };
        this.maskModel = { mask: '000-000-000' };
        this.numericModel = { placeholder: 'Enter number' };
        this.textboxModel = { placeholder: 'Enter some text' };
        this.dateRangePickerValue = [new Date('11/12/2018'), new Date('11/15/2018')];
        this.rteModel = { placeholder: 'Enter your content here' };
    }
    render() {
        return (<div id='container'>
        <h3> Built-in components </h3>
        <table className="table-section">
        <tbody>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DatePicker </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='date' mode='Inline' type='Date' value={this.dateValue} model={this.dateModel}/>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DateTimePicker </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='dateTime' mode='Inline' type='DateTime' value={this.dateTimeValue} model={this.dateModel}/>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DropDownList </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='dropDowns' mode='Inline' type='DropDownList' value='Android' model={this.dropdownModel}/>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> MaskedTextBox </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='masked' mode='Inline' type='Mask' value='123-345-678' model={this.maskModel}/>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> NumericTextBox </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='numeric' mode='Inline' type='Numeric' value={10} model={this.numericModel}/>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> TextBox </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='textbox' mode='Inline' type='Text' value='Andrew' model={this.textboxModel}/>
                </td>
            </tr>
            </tbody>
        </table>
        <h3> Injectable Components </h3>
        <table className="table-section">
          <tbody>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> AutoComplete </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='autoComplete' mode='Inline' type='AutoComplete' value='Android' model={this.dropdownModel}>
                    <Inject services={[AutoComplete]}/>
                    </InPlaceEditorComponent>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> ColorPicker </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='color' mode='Inline' type='Color' value='#81aefd'>
                    <Inject services={[ColorPicker]}/>
                    </InPlaceEditorComponent>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> ComboBox </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='comboBox' mode='Inline' type='ComboBox' value='Android' model={this.dropdownModel}>
                    <Inject services={[ComboBox]}/>
                    </InPlaceEditorComponent>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DateRangePicker </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='dateRange' mode='Inline' type='DateRange' value={this.dateRangePickerValue} model={this.dateModel}>
                    <Inject services={[DateRangePicker]}/>
                    </InPlaceEditorComponent>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> MultiSelect </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='multiSelect' mode='Inline' type='MultiSelect' value='Android' model={this.dropdownModel}>
                    <Inject services={[MultiSelect]}/>
                    </InPlaceEditorComponent>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> RTE </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='rte' mode='Inline' type='RTE' value='<p>Enter your content here</p>' model={this.rteModel}>
                    <Inject services={[Rte]}/>
                    </InPlaceEditorComponent>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Slider </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='slider' mode='Inline' type='Slider' value={20}>
                    <Inject services={[Slider]}/>
                    </InPlaceEditorComponent>
                </td>
            </tr>
            <tr>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> TimePicker </td>
                <td className="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <InPlaceEditorComponent id='time' mode='Inline' type='Time' value={this.dateValue} model={this.dateModel}>
                    <Inject services={[TimePicker]}/>
                    </InPlaceEditorComponent>
                </td>
            </tr>
            </tbody>
        </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'));

Model configuration

Component properties and events can be customized through In-place Editor model property.

In the below code, type defined as Date and DatePicker properties are configured through model property to customize the DatePicker component at In-place Editor.

Copied to clipboard
    public model = { showTodayButton: true, placeholder: 'Select Date' };

[src/app/app.ts]

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, placeholder: 'Select Date' };
  public value = new Date('04/12/2018');
  public render() {
    return (
     <InPlaceEditorComponent id='element' model={this.model} type='Date' value={this.value}/>
    );
  }
}

export default App;

See Also