- Rendering modes
- Event actions for editing
- Action on focus out
- Display modes
- See Also
Contact Support
Configuration in Vue Inplace editor component
11 Jun 202424 minutes to read
Rendering modes
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.
-
For
Popup
mode, editable container displays as like tooltip or popover above the element. -
For
Inline
mode, editable container displays as instead of the element. To renderInline
mode while opening the editor, specifymode
asInline
.
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.
<template>
<div id="app">
<table class="table-section">
<tr>
<td>Mode</td>
<td>
<ejs-dropdownlist ref="editorMode" id="editorMode" :dataSource='dataPlace'
:change='changeEditorMode' :value='dataValue' :fields='placeFields'>
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="sample-td">Enter your Name</td>
<td class="sample-td">
<ejs-inplaceeditor ref="editObj" id="inplace_editor" mode="Inline" type="Text" value="Andrew"
submitOnEnter="true" :model="textModel">
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</template>
<script setup>
import { ref } from "vue";
import { InPlaceEditorComponent as EjsInplaceeditor } from '@syncfusion/ej2-vue-inplace-editor';
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";
const editObj = ref(null);
const editorMode = ref(null);
const textModel = {
placeholder: 'Enter Some Name'
};
const dataValue = 'inline';
const placeFields = { text: 'mode', value: 'id' };
const dataPlace = [{ id: 'inline', mode: 'Inline' }, { id: 'popup', mode: 'Popup' }];
const changeEditorMode = function (args) {
let editMode = editorMode.value.$el.value;
editObj.value.ej2Instances.mode = editMode;
editObj.value.ej2Instances.dataBind();
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
.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;
}
</style>
<template>
<div id="app">
<table class="table-section">
<tr>
<td>Mode</td>
<td>
<ejs-dropdownlist ref="editorMode" id="editorMode" :dataSource='dataPlace'
:change='changeEditorMode' :value='dataValue' :fields='placeFields'>
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="sample-td">Enter your Name</td>
<td class="sample-td">
<ejs-inplaceeditor ref="editObj" id="inplace_editor" mode="Inline" type="Text" value="Andrew"
submitOnEnter="true" :model="textModel">
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
export default {
name: "App",
components: {
"ejs-dropdownlist": DropDownListComponent,
"ejs-inplaceeditor": InPlaceEditorComponent
},
data() {
return {
textModel: {
placeholder: 'Enter Some Name'
},
dataValue: 'inline',
placeFields: { text: 'mode', value: 'id' },
dataPlace: [{ id: 'inline', mode: 'Inline' }, { id: 'popup', mode: 'Popup' }],
}
},
methods: {
changeEditorMode: function (args) {
const editMode = this.$refs.editorMode.$el.value;
this.$refs.editObj.ej2Instances.mode = editMode;
this.$refs.editObj.ej2Instances.dataBind();
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
.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;
}
</style>
Pop-up customization
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
have following position options.
- TopLeft
- TopCenter
- TopRight
- BottomLeft
- BottomCenter
- BottomRight
- LeftTop
- LeftCenter
- LeftBottom
- RightTop
- RightCenter
- RightBottom
<template>
<div id="app">
<table class="table-section">
<tr>
<td>Position</td>
<td>
<ejs-dropdownlist ref="editorMode" id="editorMode" :dataSource='dataPlace'
:change='changeEditorMode' :value='dataValue' :fields='placeFields'>
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="edit-heading sample-td">Enter your Name</td>
<td class="sample-td">
<ejs-inplaceeditor ref="editObj" id="inplace_editor" mode="Popup" type="Text" value="Andrew"
submitOnEnter="true" :model="textModel" :popupSettings="textpopupsettings">
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</template>
<script setup>
import { ref } from "vue";
import { InPlaceEditorComponent as EjsInplaceeditor } from '@syncfusion/ej2-vue-inplace-editor';
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";
const editObj = ref(null);
const editorMode = ref(null);
const textModel = {
placeholder: 'Enter Some Name'
}
const textpopupsettings = {
model: {
position: 'BottomCenter'
}
}
const dataValue = 'BottomCenter';
const placeFields = { text: 'mode', value: 'id' };
const dataPlace = [{ id: 'TopLeft', mode: 'TopLeft' }, { id: 'TopCenter', mode: 'TopCenter' }, { id: 'TopRight', mode: 'TopRight' }, { id: 'BottomLeft', mode: 'BottomLeft' }, { id: 'BottomCenter', mode: 'BottomCenter' }, { id: 'BottomRight', mode: 'BottomRight' }, { id: 'LeftTop', mode: 'LeftTop' }, { id: 'LeftCenter', mode: 'LeftCenter' }, { id: 'LeftBottom', mode: 'LeftBottom' }, { id: 'RightTop', mode: 'RightTop' }, { id: 'RightCenter', mode: 'RightCenter' }, { id: 'RightBottom', mode: 'RightBottom' }];
const changeEditorMode = function (args) {
const positions = editorMode.value.$el.value;
editObj.value.ej2Instances.popupSettings.model.position = positions;
editObj.value.ej2Instances.dataBind();
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
.table-section {
margin: 0 auto;
}
.sample-td {
padding-top: 150px;
}
.edit-heading {
padding-right: 20px;
}
</style>
<template>
<div id="app">
<table class="table-section">
<tr>
<td>Position</td>
<td>
<ejs-dropdownlist ref="editorMode" id="editorMode" :dataSource='dataPlace'
:change='changeEditorMode' :value='dataValue' :fields='placeFields'>
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="edit-heading sample-td">Enter your Name</td>
<td class="sample-td">
<ejs-inplaceeditor ref="editObj" id="inplace_editor" mode="Popup" type="Text" value="Andrew"
submitOnEnter="true" :model="textModel" :popupSettings="textpopupsettings">
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
export default {
name: "App",
components: {
"ejs-dropdownlist": DropDownListComponent,
"ejs-inplaceeditor": InPlaceEditorComponent
},
data() {
return {
textModel: {
placeholder: 'Enter Some Name',
},
textpopupsettings: {
model: {
position: 'BottomCenter'
}
},
dataValue: 'BottomCenter',
placeFields: { text: 'mode', value: 'id' },
dataPlace: [{ id: 'TopLeft', mode: 'TopLeft' }, { id: 'TopCenter', mode: 'TopCenter' }, { id: 'TopRight', mode: 'TopRight' }, { id: 'BottomLeft', mode: 'BottomLeft' }, { id: 'BottomCenter', mode: 'BottomCenter' }, { id: 'BottomRight', mode: 'BottomRight' }, { id: 'LeftTop', mode: 'LeftTop' }, { id: 'LeftCenter', mode: 'LeftCenter' }, { id: 'LeftBottom', mode: 'LeftBottom' }, { id: 'RightTop', mode: 'RightTop' }, { id: 'RightCenter', mode: 'RightCenter' }, { id: 'RightBottom', mode: 'RightBottom' }],
}
},
methods: {
changeEditorMode: function (args) {
let positions = this.$refs.editorMode.$el.value;
this.$refs.editObj.ej2Instances.popupSettings.model.position = positions;
this.$refs.editObj.ej2Instances.dataBind();
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
.table-section {
margin: 0 auto;
}
.sample-td {
padding-top: 150px;
}
.edit-heading {
padding-right: 20px;
}
</style>
Event actions for editing
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.
- Click: The editor will be opened as single click actions.
- DblClick: The editor will be opened as double-click actions and it is not applicable for edit icon.
- EditIconClick: Disables the editing of event action of input and allows user to edit only through edit icon.
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.
<template>
<div id="app">
<table class="table-section">
<tr>
<td>EditableOn</td>
<td>
<ejs-dropdownlist ref="editableOn" id="editableon" :dataSource='editableData' :change='onEditableOn'
:value='editableValue' :fields='editableFields'>
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="sample-td">Enter your Name</td>
<td class="sample-td">
<ejs-inplaceeditor ref="editObj" id="inplace_editor" mode="Inline" type="Text" value="Andrew"
submitOnEnter="true" :model="textModel">
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</template>
<script setup>
import { ref } from "vue";
import { InPlaceEditorComponent as EjsInplaceeditor } from '@syncfusion/ej2-vue-inplace-editor';
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";
const editableOn = ref(null);
const editObj = ref(null);
const textModel = {
placeholder: 'Enter Some Text'
};
const editableFields = { text: 'editable', value: 'id' };
const editableData = [{ id: 'Click', editable: 'Click' }, { id: 'DblClick', editable: 'Double Click' }, { id: 'EditIconClick', editable: 'Edit Icon Click' }];
const editableValue = 'Click';
const onEditableOn = function () {
let editableOn = editableOn.value.ej2Instances.value;
editObj.value.ej2Instances.editableOn = editableOn;
editObj.value.dataBind();
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
.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;
}
</style>
<template>
<div id="app">
<table class="table-section">
<tr>
<td>EditableOn</td>
<td>
<ejs-dropdownlist ref="editableOn" id="editableon" :dataSource='editableData' :change='onEditableOn'
:value='editableValue' :fields='editableFields'>
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="sample-td">Enter your Name</td>
<td class="sample-td">
<ejs-inplaceeditor ref="editObj" id="inplace_editor" mode="Inline" type="Text" value="Andrew"
submitOnEnter="true" :model="textModel">
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
export default {
name: "App",
components: {
"ejs-dropdownlist": DropDownListComponent,
"ejs-inplaceeditor": InPlaceEditorComponent,
},
data() {
return {
textModel: {
placeholder: 'Enter Some Text'
},
editableFields: { text: 'editable', value: 'id' },
editableData: [{ id: 'Click', editable: 'Click' }, { id: 'DblClick', editable: 'Double Click' }, { id: 'EditIconClick', editable: 'Edit Icon Click' }],
editableValue: 'Click',
}
},
methods: {
onEditableOn: function () {
let editableOn = this.$refs.editableOn.ej2Instances.value;
this.$refs.editObj.ej2Instances.editableOn = editableOn;
this.$refs.editObj.ej2Instances.dataBind();
},
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
.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;
}
</style>
Action on focus out
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.
- Cancel: Cancels the editing and resets the old content.
- Submit: Submits the edited content to the server.
- Ignore: No action is performed with this type and allows to edit multiple editors.
In the following sample, when switching drop-down item, the selected value assigned to the actionOnBlur
property.
<template>
<div id="app">
<table class="table-section">
<tr>
<td>ActionOnBlur</td>
<td>
<ejs-dropdownlist ref="actions" id="actions" :dataSource='blurActionData' :change='onEditableOn'
:value='actionValue' :fields='actionFields'>
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="sample-td">Enter your Name</td>
<td class="sample-td">
<ejs-inplaceeditor ref="editObj" id="inplace_editor" mode="Inline" type="Text" value="Andrew"
submitOnEnter="true" :model="textModel">
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</template>
<script setup>
import { ref } from "vue";
import { InPlaceEditorComponent as EjsInplaceeditor } from '@syncfusion/ej2-vue-inplace-editor';
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";
const actions = ref(null);
const editObj = ref(null);
const textModel = {
placeholder: 'Enter Some Text'
}
const actionFields = { text: 'editable', value: 'id' }
const blurActionData = [{ id: 'Submit', editable: 'Submit' }, { id: 'Cancel', editable: 'Cancel' }, { id: 'Ignore', editable: 'Ignore' }];
const actionValue = 'Submit'
const onEditableOn = function () {
let actionType = actions.value.ej2Instances.value;
editObj.value.ej2Instances.actionOnBlur = actionType;
editObj.value.ej2Instances.dataBind();
}
</script>
<template>
<div id="app">
<table class="table-section">
<tr>
<td>ActionOnBlur</td>
<td>
<ejs-dropdownlist ref="actions" id="actions" :dataSource='blurActionData' :change='onEditableOn'
:value='actionValue' :fields='actionFields'>
</ejs-dropdownlist>
</td>
</tr>
<tr>
<td class="sample-td">Enter your Name</td>
<td class="sample-td">
<ejs-inplaceeditor ref="editObj" id="inplace_editor" mode="Inline" type="Text" value="Andrew"
submitOnEnter="true" :model="textModel">
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
export default {
name: "App",
components: {
"ejs-dropdownlist": DropDownListComponent,
"ejs-inplaceeditor": InPlaceEditorComponent,
},
data() {
return {
textModel: {
placeholder: 'Enter Some Text'
},
actionFields: { text: 'editable', value: 'id' },
blurActionData: [{ id: 'Submit', editable: 'Submit' }, { id: 'Cancel', editable: 'Cancel' }, { id: 'Ignore', editable: 'Ignore' }],
actionValue: 'Submit',
};
},
methods: {
onEditableOn: function () {
var actionType = this.$refs.actions.ej2Instances.value;
this.$refs.editObj.ej2Instances.actionOnBlur = actionType;
this.$refs.editObj.ej2Instances.dataBind();
}
}
}
</script>
Display modes
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.
In the following sample, denotes to indicate intractable and normal display modes with different samples.
<template>
<div id="app">
<h4>Example of data-underline attribute</h4>
<table class="table-section">
<tr>
<td>Intractable UI</td>
<td>
<ejs-inplaceeditor mode="Inline" :model="textModel" type="Text" value="Andrew">
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td class="sample-td">Normal UI </td>
<td class="sample-td">
<ejs-inplaceeditor mode="Inline" :model="textModel" type="Text" data-underline="false"
value="Andrew" />
</td>
</tr>
</table>
</div>
</template>
<script setup>
import { InPlaceEditorComponent as EjsInplaceeditor } from '@syncfusion/ej2-vue-inplace-editor';
const textModel = {
placeholder: 'Enter Some Text'
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
.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;
}
h4 {
text-align: center;
font-size: 18px;
}
</style>
<template>
<div id="app">
<h4>Example of data-underline attribute</h4>
<table class="table-section">
<tr>
<td>Intractable UI</td>
<td>
<ejs-inplaceeditor mode="Inline" :model="textModel" type="Text" value="Andrew">
</ejs-inplaceeditor>
</td>
</tr>
<tr>
<td class="sample-td">Normal UI </td>
<td class="sample-td">
<ejs-inplaceeditor mode="Inline" :model="textModel" type="Text" data-underline="false"
value="Andrew" />
</td>
</tr>
</table>
</div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';
export default {
name: "App",
components: {
"ejs-inplaceeditor": InPlaceEditorComponent
},
data() {
return {
textModel: {
placeholder: 'Enter Some Text'
},
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
.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;
}
h4 {
text-align: center;
font-size: 18px;
}
</style>