Controls in EJ2 TypeScript In place editor control

16 Jun 202319 minutes to read

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

The following 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 following sample, built-in and injectable based In-place Editor controls are rendered.

index.ts
index.html
import { InPlaceEditor, AutoComplete, ColorPicker, ComboBox } from '@syncfusion/ej2-inplace-editor';
import { DateRangePicker, MultiSelect, Rte, Slider, TimePicker } from '@syncfusion/ej2-inplace-editor';

InPlaceEditor.Inject(AutoComplete, ColorPicker, ComboBox, DateRangePicker, MultiSelect, Rte, Slider, TimePicker);

let frameWorkList: string[] = ['Android', 'JavaScript', 'jQuery', 'TypeScript', 'Angular', 'React', 'Vue', 'Ionic'];

let dateObj: InPlaceEditor = new InPlaceEditor({
    mode: 'Inline',
    type: 'Date',
    model: {
        placeholder: 'Select date'
    },
    value: new Date('11/23/2018')
});
dateObj.appendTo('#date');

let dateTimeObj: InPlaceEditor = new InPlaceEditor({
    mode: 'Inline',
    type: 'DateTime',
    model: {
        placeholder: 'Select date'
    },
    value: new Date('11/23/2018 12:30 PM')
});
dateTimeObj.appendTo('#dateTime');

let dropDownObj: InPlaceEditor = new InPlaceEditor({
    mode: 'Inline',
    type: 'DropDownList',
    value: 'Android',
    model: {
        dataSource: frameWorkList,
        placeholder: 'Select frameworks'
    }
});
dropDownObj.appendTo('#dropDowns');

let maskObj: InPlaceEditor = new InPlaceEditor({
    mode: 'Inline',
    type: 'Mask',
    value: '123-345-678',
    model: {
        mask: '000-000-000'
    }
});
maskObj.appendTo('#masked');

let numericObj: InPlaceEditor = new InPlaceEditor({
    mode: 'Inline',
    type: 'Numeric',
    value: 10,
    model: {
        placeholder: 'Enter number'
    }
});
numericObj.appendTo('#numeric');

let textObj: InPlaceEditor = new InPlaceEditor({
    mode: 'Inline',
    type: 'Text',
    value: 'Andrew',
    model: {
        placeholder: 'Enter some text'
    }
});
textObj.appendTo('#textbox');

let atcObj: InPlaceEditor = new InPlaceEditor({
    mode: 'Inline',
    type: 'AutoComplete',
    value: 'Android',
    model: {
        dataSource: frameWorkList,
        placeholder: 'Select frameworks'
    }
});
atcObj.appendTo('#autoComplete');

let colorObj: InPlaceEditor = new InPlaceEditor({
    mode: 'Inline',
    type: 'Color',
    value: '#81aefd'
});
colorObj.appendTo('#color');

let comboBoxObj: InPlaceEditor = new InPlaceEditor({
    mode: 'Inline',
    type: 'ComboBox',
    value: 'Android',
    model: {
        dataSource: frameWorkList,
        placeholder: 'Select frameworks'
    }
});
comboBoxObj.appendTo('#comboBox');

let dateRangeObj: InPlaceEditor = new InPlaceEditor({
    mode: 'Inline',
    type: 'DateRange',
    value: [new Date('11/12/2018'), new Date('11/15/2018')],
    model: {
        placeholder: 'Select date'
    }
});
dateRangeObj.appendTo('#dateRange');

let multiSelectObj: InPlaceEditor = new InPlaceEditor({
    mode: 'Inline',
    type: 'MultiSelect',
    value: ['Android'],
    model: {
        dataSource: frameWorkList,
        placeholder: 'Select frameworks'
    }
});
multiSelectObj.appendTo('#multiSelect');

let rteObj: InPlaceEditor = new InPlaceEditor({
    mode: 'Inline',
    type: 'RTE',
    value: '<p>Enter your content here</p>',
    model: {
        placeholder: 'Enter your content here'
    }
});
rteObj.appendTo('#rte');

let sliderObj: InPlaceEditor = new InPlaceEditor({
    mode: 'Inline',
    type: 'Slider',
    value: 20
});
sliderObj.appendTo('#slider');

let timeObj: InPlaceEditor = new InPlaceEditor({
    mode: 'Inline',
    type: 'Time',
    model: {
        placeholder: 'Select date'
    },
    value: new Date('11/23/2018')
});
timeObj.appendTo('#time');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript In-place Editor Control" />
    <meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <h3> Built-in Controls </h3>
        <table class="table-section">
            <tr>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DatePicker </td>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div id="date"></div>
                </td>
            </tr>
            <tr>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DateTimePicker </td>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div id="dateTime"></div>
                </td>
            </tr>
            <tr>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DropDownList </td>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div id="dropDowns"></div>
                </td>
            </tr>
            <tr>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> MaskedTextBox </td>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div id="masked"></div>
                </td>
            </tr>
            <tr>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> NumericTextBox </td>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div id="numeric"></div>
                </div>
            </tr>
            <tr>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> TextBox </td>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div id="textbox"></div>
                </td>
            </tr>
        </table>
        <h3> Injectable Controls </h3>
        <table class="table-section">
            <tr>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> AutoComplete </td>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div id="autoComplete"></div>
                </td>
            </tr>
            <tr>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> ColorPicker </td>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div id="color"></div>
                </td>
            </tr>
            <tr>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> ComboBox </td>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div id="comboBox"></div>
                </td>
            </tr>
            <tr>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> DateRangePicker </td>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div id="dateRange"></div>
                </td>
            </tr>
            <tr>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> MultiSelect </td>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div id="multiSelect"></div>
                </div>
            </tr>
            <tr>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> RTE </td>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div id="rte"></div>
                </td>
            </tr>
            <tr>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Slider </td>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div id="slider"></div>
                </td>
            </tr>
            <tr>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> TimePicker </td>
                <td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
                    <div id="time"></div>
                </td>
            </tr>
        </table>
    </div>
</body>

</html>

Model configuration

Control properties and events can be customized using the In-place Editor model property.

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

    model: {
        showTodayButton: true,
        placeholder: 'Select Date'
    }

[src/app/app.ts]

import { InPlaceEditor } from '@syncfusion/ej2-inplace-editor';
let editObj: InPlaceEditor = new InPlaceEditor({
    type: 'Date',
    value: new Date('04/12/2018'),
    model: {
        showTodayButton: true,
        placeholder: 'Select Date'
    }
});
editObj.appendTo('#element');

Controls in EJ2 TypeScript In place editor control

Model configuration

See Also