Search results

List of controls

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 InPlaceEditor. 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.

Source
Preview
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: 'Enter your content here',
    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="//cdn.syncfusion.com/ej2/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>
</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');

See Also