Getting Started with the Vue Inplace editor Component in Vue 2
26 Sep 202320 minutes to read
This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion Vue Inplace editor component
Prerequisites
System requirements for Syncfusion Vue UI components
Dependencies
The following list of dependencies are required to use the In-place Editor component in your application.
|-- @syncfusion/ej2-vue-inplace-editor
|-- @syncfusion/ej2-base
|-- @syncfusion/ej2-buttons
|-- @syncfusion/ej2-calendars
|-- @syncfusion/ej2-data
|-- @syncfusion/ej2-dropdowns
|-- @syncfusion/ej2-inputs
|-- @syncfusion/ej2-lists
|-- @syncfusion/ej2-navigations
|-- @syncfusion/ej2-popups
|-- @syncfusion/ej2-richtexteditor
|-- @syncfusion/ej2-splitbuttons
|-- @syncfusion/ej2-vue-base
Setting up the Vue 2 project
To generate a Vue 2 project using Vue-CLI, use the vue create command. Follow these steps to install Vue CLI and create a new project:
npm install -g @vue/cli
vue create quickstart
cd quickstart
npm run serve
or
yarn global add @vue/cli
vue create quickstart
cd quickstart
yarn run serve
When creating a new project, choose the option Default ([Vue 2] babel, eslint)
from the menu.
Once the quickstart
project is set up with default settings, proceed to add Syncfusion components to the project.
Add Syncfusion Vue packages
Syncfusion packages are available at npmjs.com. To use Vue components, install the required npm package.
This article uses the Vue Inplace editor component as an example. Install the @syncfusion/ej2-vue-inplace-editor
package by running the following command:
npm install @syncfusion/ej2-vue-inplace-editor --save
or
yarn add @syncfusion/ej2-vue-inplace-editor
Import Syncfusion CSS styles
You can import themes for the Syncfusion Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, CRG and Theme Studio. Refer to themes topic to know more about built-in themes and different ways to refer to themes in a Vue project.
In this article, the Material
theme is applied using CSS styles, which are available in installed packages. The necessary Material
CSS styles for the Inplace editor component and its dependents were imported into the <style>
section of src/App.vue file.
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
</style>
Add Syncfusion Vue component
Follow the below steps to add the Vue Inplace editor component:
1. First, import and register the Inplace editor component in the script
section of the src/App.vue file.
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';
export default {
components: {
'ejs-inplaceeditor': InPlaceEditorComponent
}
}
</script>
2. In the template
section, define the Inplace editor component with the model property.
<template>
<div id="app">
<ejs-inplaceeditor id="inplace_editor" type="Text" value="Andrew" :model="model">
</ejs-inplaceeditor>
</div>
</template>
3. Declare the value for the model
property in the script
section.
<script>
data () {
return {
model: {
placeholder: 'Enter employee name'
},
}
}
</script>
Add the In-place Editor with Textbox
By default, the TextBox component is rendered in In-place Editor with the type
property sets as Text.
<template>
<div id="app">
<ejs-inplaceeditor id="inplace_editor" type="Text" value="Andrew" :model="model">
</ejs-inplaceeditor>
</div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';
export default {
components: {
'ejs-inplaceeditor': InPlaceEditorComponent
},
name: 'app',
data: function(){
return {
model: {
placeholder: 'Enter employee name'
},
}
}
}
</script>
Configure DropDownList
You can render DropDownList by changing the type
property as DropDownList
and configure its properties and methods using the model
property.
In the following sample, type
and model values are configured to render the DropDownList
component.
<template>
<div id="app">
<ejs-inplaceeditor id="element" type="DropDownList" mode= "Inline" :model="model">
</ejs-inplaceeditor>
</div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';
export default {
components: {
'ejs-inplaceeditor': InPlaceEditorComponent
},
name: 'app',
data () {
return {
model: {
genderData: ['Male', 'Female'],
placeholder: 'Select gender'
},
}
}
}
</script>
Integrate DatePicker
You can render DatePicker by changing the type
property as Date
and also configure its properties and methods using model
property.
In the below sample, type
and model
values are configured to render the DatePicker component.
<template>
<div id="app">
<ejs-inplaceeditor id="inplace_editor" type="Date" :model="model" :value="value">
</ejs-inplaceeditor>
</div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';
export default {
components: {
'ejs-inplaceeditor': InPlaceEditorComponent
},
name: 'app',
data () {
return {
value: new Date('04/12/2018'),
model: {
showTodayButton: true
},
}
}
}
</script>
Here is the summarized code for the above steps in the src/App.vue file:
<template>
<div id="app">
<div class="control-group">
<h3> Modify Basic Details </h3>
<table>
<tr>
<td>Name</td>
<td class='left'>
<ejs-inplaceeditor id="element" type="Text" mode="Inline" value="Andrew"
:model="textModel"></ejs-inplaceeditor>
</td>
</tr>
<tr>
<td>Date of Birth</td>
<td class='left'>
<ejs-inplaceeditor id="dateofbirth" type="Date" mode="Inline" :value="dateValue"
:model="dateModel"></ejs-inplaceeditor>
</td>
</tr>
<tr>
<td>Gender</td>
<td class='left'>
<ejs-inplaceeditor id="gender" type="DropDownList" mode="Inline" value="Male"
:model="dropdownModel"></ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';
export default {
name: "App",
components: {
'ejs-inplaceeditor': InPlaceEditorComponent
},
data() {
return {
dateValue: new Date('04/12/2018'),
dateModel: {
showTodayButton: true,
placeholder: 'Select date of birth'
},
textModel: {
placeholder: 'Enter your name'
},
dropdownModel: {
dataSource: ['Male', 'Female'],
placeholder: 'Select gender'
},
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
</style>
<style>
#app {
visibility: hidden;
}
#app .control-group {
text-align: center;
margin-top: 50px;
}
#app .control-group table {
width: 400px;
margin: auto;
}
#app .control-group table td {
height: 70px;
width: 150px;
}
#app .control-group table td.left {
text-align: left;
}
</style>
Run the project
To run the project, use the following command:
npm run serve
or
yarn run serve
Two-way binding
In In-place Editor, two-way binding support is achieved using the v-model
directive in Vue. When you change a value in the first In-place Editor component, the changed value gets updated automatically to the second In-place Editor. The following example demonstrates, how to achieve two-way binding in In-place Editor.
<template>
<div id="app">
<div id='container'>
<div class="control-group">
<table>
<tr>
<td><b>TextBox :</b></td>
<ejs-inplaceeditor id="textbox" type="Text" mode="Inline" :model="textModel" v-model="value">
</ejs-inplaceeditor>
<ejs-inplaceeditor id="textbox2" type="Text" mode="Inline" :model="textModel" v-model="value">
</ejs-inplaceeditor>
</tr>
<tr>
<td><b>Datepicker :</b></td>
<ejs-inplaceeditor id="dateeditor1" mode="Inline" type="Date" :model="dateModel" v-model="datePickerValue">
</ejs-inplaceeditor>
<ejs-inplaceeditor id="dateeditor2" mode="Inline" type="Date" :model="dateModel" v-model="datePickerValue">
</ejs-inplaceeditor>
</tr>
<tr>
<td><b>DropDownList :</b></td>
<ejs-inplaceeditor id="dropDowneditor1" mode="Inline" type="DropDownList" :model="dropdownModel"
v-model="dropdownValue">
</ejs-inplaceeditor>
<ejs-inplaceeditor id="dropDowneditor2" mode="Inline" type="DropDownList" :model="dropdownModel"
v-model="dropdownValue">
</ejs-inplaceeditor>
</tr>
</table>
</div>
</div>
</div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';
export default {
name: "App",
components: {
'ejs-inplaceeditor': InPlaceEditorComponent
},
data() {
let frameWorkList = ['Android', 'JavaScript', 'jQuery', 'TypeScript',
'Angular', 'React', 'Vue', 'Ionic'];
return {
value: 'Andrew',
dropdownValue: 'Android',
datePickerValue: new Date('11/23/2018'),
textModel: {
placeholder: 'Enter employee name'
},
dropdownModel: {
placeholder: 'Select frameWorks',
dataSource: frameWorkList
},
dateModel: {
placeholder: 'Select date'
}
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
</style>
<style>
#app {
visibility: hidden;
}
#app .control-group {
text-align: center;
margin-top: 50px;
}
#app .control-group table {
width: 400px;
margin: auto;
}
#app .control-group table td {
height: 70px;
width: 150px;
}
#app .control-group table td.left {
text-align: left;
}
</style>
Submitting data to the server (save)
You can submit editor value to server by configuring the url
, adaptor
, and primaryKey
property.
Property | Usage |
---|---|
url |
Gets the url for server submit action. |
adaptor |
Specifies the adaptor type that is used by DataManager to communicate with DataSource. |
primaryKey |
Defines the unique primary key of editable field which can be used for saving data in the data-base. |
The
primaryKey
property is mandatory. If it’s not set, edited data are not sent to the server.
Refresh with modified value
The edited data is submitted to the server and you can see the new values getting reflected in the In-place Editor.
<template>
<div id="app">
<div class="container">
<div class="control-group" style="text-align:center;margin: 100px auto">
Best Employee of the year: <ejs-inplaceeditor id="element" type="DropDownList" mode="Inline"
value="Andrew Fuller" name="Employee" :url="serviceUrl" primaryKey="Employee" adaptor="UrlAdaptor"
:model="dropdownModel" :actionSuccess="actionSuccess" :created='created'></ejs-inplaceeditor>
</div>
<table style="margin:auto;width:50%">
<tr>
<td style="text-align: left">
Old Value :
</td>
<td id="oldValue" ref="oldValue" style="text-align: left">
</td>
</tr>
<tr>
<td style="text-align: left">
New Value :
</td>
<td id="newValue" ref="newValue" style="text-align: left">
Andrew Fuller
</td>
</tr>
</table>
</div>
</div>
</template>
<script>
import { InPlaceEditorComponent, MultiSelect } from '@syncfusion/ej2-vue-inplace-editor';
export default {
name: "App",
components: {
'ejs-inplaceeditor': InPlaceEditorComponent
},
data() {
return {
serviceUrl: "https://ej2services.syncfusion.com/development/web-services/api/Editor/UpdateData",
dropdownModel: {
dataSource: ['Andrew Fuller', 'Janet Leverling', 'Laura Callahan', 'Margaret Hamilt', 'Michael Suyama', 'Nancy Davloio', 'Robert King'],
popupHeight: '200px',
placeholder: 'Select employee'
},
}
},
methods: {
actionSuccess: function (e) {
this.$refs.oldValue.textContent = this.$refs.newValue.textContent;
this.$refs.newValue.textContent = e.value;
}
},
provide: {
"inplaceeditor": [MultiSelect]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inplace-editor/styles/material.css";
</style>
<style>
.e-inplaceeditor {
min-width: 200px;
text-align: left
}
</style>