This section explains the supported rendering modes of the In-place Editor. Possible Rendering modes are as follows.
* Popup
* Inline
By default,
Popup
mode will be rendered, when opening an editor.
Popup
mode, editable container displays as like tooltip or popover above the element.Inline
mode, editable container displays as instead of the element. To render Inline
mode while opening the editor, specify mode
as Inline
.In the following sample, the In-place Editor renders with Inline
mode. You can dynamically switch into another mode by changing the drop-down item value.
import { Component, ViewChild } from '@angular/core';
import { InPlaceEditorComponent, RenderMode } from '@syncfusion/ej2-angular-inplace-editor';
import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
@Component({
selector: 'app-root',
template: `
<div id='container'>
<table class="table-section">
<tr>
<td> Mode: </td>
<td>
<ejs-dropdownlist #dropDown (change)="onChange($event)" id='dropDown' width="auto" [dataSource]='modeData' value='Inline' placeholder="Select Mode">
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="sample-td"> Enter your name: </td>
<td class="sample-td">
<ejs-inplaceeditor #element id="element" mode="Inline" value="Andrew" [model]="model"></ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
`
})
export class AppComponent {
@ViewChild('element') editObj: InPlaceEditorComponent;
public model: Object = { placeholder: 'Enter some text' };
public modeData: string[] = ['Inline', 'Popup'];
public onChange(e: ChangeEventArgs): void {
const mode: RenderMode = e.itemData.value as RenderMode;
this.editObj.mode = mode;
this.editObj.dataBind();
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, InPlaceEditorAllModule, DropDownListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 InPlace Editor Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript InPlace Editor Controls" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<app-root>
<div id='loader'>LOADING....</div>
</app-root>
</body>
</html>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.table-section {
margin: 0 auto;
}
tr td:first-child {
text-align: right;
padding-right: 20px;
}
.sample-td {
padding-top: 10px;
min-width: 230px;
height: 100px;
}
In-place Editor popup mode can be customized by using the title and model properties in popupSettings API.
Popup mode rendered by using the Essential JS 2 Tooltip component, so you can use tooltip properties and events to customize the behavior of popup via the model property of popupSettings API.
For more details, refer the tooltip documentation section.
In the following sample, popup title and position customized using the popupSettings property. All possible tooltip position data configured in the drop-down, if we change drop down item, selected value bound to model property and applied it to Tooltip component. Tooltip
has following position options.
import { Component, ViewChild } from '@angular/core';
import { InPlaceEditorComponent } from '@syncfusion/ej2-angular-inplace-editor';
import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
@Component({
selector: 'app-root',
template: `
<div id='container'>
<table class="table-section">
<tr>
<td> Position: </td>
<td>
<ejs-dropdownlist #dropDown (change)="onChange($event)" id='dropDown' width="auto" [dataSource]='positionData' value='BottomCenter' placeholder="Select a position" popupHeight="150px">
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="edit-heading sample-td"> Enter your name: </td>
<td class="sample-td">
<ejs-inplaceeditor #element id="element" mode="Popup" value="Andrew" [model]="model" [popupSettings]="popupSettingsModel"></ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
`
})
export class AppComponent {
@ViewChild('element') editObj: InPlaceEditorComponent;
public model: Object = { placeholder: 'Enter some text' };
public popupSettingsModel: object = { title: 'Enter name', model : { position: 'BottomCenter' }};
public positionData: string[] = ['TopLeft', 'TopCenter',
'TopRight', 'BottomLeft', 'BottomCenter', 'BottomRight', 'LeftTop', 'LeftCenter', 'LeftBottom', 'RightTop', 'RightCenter', 'RightBottom'];
public onChange(e: ChangeEventArgs): void {
this.editObj.popupSettings.model.position = e.value as string;
this.editObj.dataBind();
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, InPlaceEditorAllModule, DropDownListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 InPlace Editor Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript InPlace Editor Controls" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<app-root>
<div id='loader'>LOADING....</div>
</app-root>
</body>
</html>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.table-section {
margin: 0 auto;
}
.sample-td {
padding-top: 150px;
}
.edit-heading {
padding-right: 20px;
}
The event action of the editor that enable in the edit mode based on the editableOn property, by default Click
is assigned, the following options are also supported.
In-place Editor get focus by pressing the
tab
key from previous focusable DOM element and then by pressingenter
key, the editor will be opened.
In the following sample, when switching drop-down item, the selected value assigned to the editableOn
property. If you changed to DblClick
, the editor will open when making a double click on the input.
import { Component, ViewChild } from '@angular/core';
import { InPlaceEditorComponent, EditableType } from '@syncfusion/ej2-angular-inplace-editor';
import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
@Component({
selector: 'app-root',
template: `
<div id='container'>
<table class="table-section">
<tr>
<td> EditableOn: </td>
<td>
<ejs-dropdownlist #dropDown (change)="onChange($event)" id='dropDown' width="auto" [dataSource]='editableOnData' value='Click' placeholder="Select edit type">
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="sample-td"> Enter your name: </td>
<td class="sample-td">
<ejs-inplaceeditor #element id="element" mode="Inline" value="Andrew" [model]="model"></ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
`
})
export class AppComponent {
@ViewChild('element') editObj: InPlaceEditorComponent;
public model: Object = { placeholder: 'Enter some text' };
public editableOnData: string[] = ['Click', 'DblClick', 'EditIconClick'];
public onChange(e: ChangeEventArgs): void {
let editType: EditableType = e.itemData.value as EditableType;
this.editObj.editableOn = editType;
this.editObj.dataBind();
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, InPlaceEditorAllModule, DropDownListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 InPlace Editor Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript InPlace Editor Controls" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<app-root>
<div id='loader'>LOADING....</div>
</app-root>
</body>
</html>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.table-section {
margin: 0 auto;
}
tr td:first-child {
text-align: right;
padding-right: 20px;
}
.sample-td {
padding-top: 10px;
min-width: 230px;
height: 100px;
}
Action to be performed when the user clicks outside the container, that means focusing out of editable content and it can be handled by the actionOnBlur property, by default Submit
assigned. It also has the following options.
In the following sample, when switching drop-down item, the selected value assigned to the actionOnBlur
property.
import { Component, ViewChild } from '@angular/core';
import { InPlaceEditorComponent, ActionBlur } from '@syncfusion/ej2-angular-inplace-editor';
import { ChangeEventArgs } from '@syncfusion/ej2-dropdowns';
@Component({
selector: 'app-root',
template: `
<div id='container'>
<table class="table-section">
<tr>
<td> ActionOnBlur: </td>
<td>
<div id="dropDown"></div>
<ejs-dropdownlist #dropDown (change)="onChange($event)" id='dropDown' width="auto" [dataSource]='blurActionData' value='Submit' placeholder="Select blur action">
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="sample-td"> Enter your name: </td>
<td class="sample-td">
<ejs-inplaceeditor #element id="element" mode="Inline" value="Andrew" [model]="model"></ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
`
})
export class AppComponent {
@ViewChild('element') editObj: InPlaceEditorComponent;
public model: Object = { placeholder: 'Enter some text' };
public blurActionData: string[] = ['Submit', 'Cancel', 'Ignore'];
public onChange(e: ChangeEventArgs): void {
let editType: ActionBlur = e.itemData.value as ActionBlur;
this.editObj.actionOnBlur = editType;
this.editObj.dataBind();
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor';
import { DropDownListAllModule } from '@syncfusion/ej2-angular-dropdowns';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, InPlaceEditorAllModule, DropDownListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 InPlace Editor Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript InPlace Editor Controls" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<script src="https://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<app-root>
<div id='loader'>LOADING....</div>
</app-root>
</body>
</html>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.table-section {
margin: 0 auto;
}
tr td:first-child {
text-align: right;
padding-right: 20px;
}
.sample-td {
padding-top: 10px;
min-width: 230px;
height: 100px;
}
By default, In-place Editor input element highlighted with a dotted underline. To remove dotted underline from input element, add data-underline="false"
attribute at In-place Editor root element.
The following sample, denotes intractable and normal display modes with different samples.
import { Component } from '@angular/core';
import { InPlaceEditorComponent } from '@syncfusion/ej2-angular-inplace-editor';
@Component({
selector: 'app-root',
template: `
<div id='container'>
<h4>Example of data-underline attribute</h4>
<table class="table-section">
<tr>
<td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Intractable UI </td>
<td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<ejs-inplaceeditor id="default" mode="Inline" value="Andrew" [model]="model"></ejs-inplaceeditor>
</td>
</tr>
<tr>
<td class="col-lg-6 col-md-6 col-sm-6 col-xs-6 control-title"> Normal UI </td>
<td class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<ejs-inplaceeditor id="inline" data-underline="false" mode="Inline" value="Andrew" [model]="model"></ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
`
})
export class AppComponent {
public model: Object = { placeholder: 'Enter some text' };
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InPlaceEditorAllModule } from '@syncfusion/ej2-angular-inplace-editor';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, InPlaceEditorAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2 InPlace Editor Sample</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Typescript InPlace Editor Controls" />
<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://unpkg.com/core-js/client/shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.9.0/zone.min.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<app-root>
<div id='loader'>LOADING....</div>
</app-root>
</body>
</html>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
.table-section {
margin: 0 auto;
}
td {
padding: 20px 0;
min-width: 230px;
height: 100px;
}
.control-title {
font-weight: 600;
padding-right: 20px;
text-align: right;
}
h4 {
text-align: center;
}