Controls in EJ2 JavaScript 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.js
index.html
ej.base.enableRipple(true);

var frameWorkList = ['Android', 'JavaScript', 'jQuery', 'TypeScript', 'Angular', 'React', 'Vue', 'Ionic'];

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

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

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

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

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

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

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

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

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

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

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

var rteObj = new ej.inplaceeditor.InPlaceEditor({
    type: 'RTE',
    mode: 'Inline',
    value: 'Enter your content here',
    model: {
        placeholder: 'Enter your content here'
    }
});
rteObj.appendTo('#rte');

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

var timeObj = new ej.inplaceeditor.InPlaceEditor({
    type: 'Time',
    mode: 'Inline',
    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/27.2.2/material.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/27.2.2/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <h3> Built-in Controls </h3>
        <table class="table-section">
            <tbody><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>
                
            </td></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>
        </tbody></table>
        <h3> Injectable Controls </h3>
        <table class="table-section">
            <tbody><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>
                
            </td></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>
        </tbody></table>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</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 JavaScript In place editor control

Model configuration

See Also