Search results

List of Components in React InPlaceEditor component

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 InPlaceEditor. 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
index.tsx
index.html
App.css.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 React In-place Editor Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #container {
            visibility: visible;
        }

        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        body {
            padding: 20px 0
        }

        .control-title {
            font-weight: 600;
            padding-right: 20px;
        }

        td {
            height: 80px;
        }

        tr td:first-child {
            text-align: right;
        }

        tr td:last-child {
            text-align: left;
        }

        .table-section {
            margin: 0 auto;
        }

        h3 {
            text-align: center;
        }
    </style>
</head>
<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>
</html>
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';
import './App.css';
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='Enter your content here' 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;

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.

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

[src/app/app.ts]

{compileJsx=true %}

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;

{% endtab %}

See Also