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.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="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.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');

See Also