Search results

Getting Started

This section briefly explains about how to create a simple In-place Editor using VueJS and demonstrates the basic usage of the RTE component using the Essential JS 2 quickstart seed repository.

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
  |-- @syncfusion/ej2-vue-buttons
  |-- @syncfusion/ej2-vue-calendars
  |-- @syncfusion/ej2-vue-data
  |-- @syncfusion/ej2-vue-dropdowns
  |-- @syncfusion/ej2-vue-inputs
  |-- @syncfusion/ej2-vue-lists
  |-- @syncfusion/ej2-vue-navigations
  |-- @syncfusion/ej2-vue-popups
  |-- @syncfusion/ej2-vue-richtexteditor
  |-- @syncfusion/ej2-vue-splitbuttons

Get Started with Vue CLI

You can use Vue CLI to setup your vue applications. To install Vue CLI use the following command.

npm install -g @vue/cli
npm install -g @vue/cli-init

Start a new project using below Vue CLI command.

vue init webpack-simple quickstart

cd quickstart
npm install

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com registry. You can choose the component that you want to install. For this application, we are going to use In-place Editor component.

To install In-place Editor component, use the following command

npm install @syncfusion/ej2-vue-inplace-editor –save

Registering Vue Component

For Registering Vue Component two ways are available. They are as follows.

  • Vue.use()
  • Vue.component()

Using Vue.use()

Import the Component Plugin from the EJ2 Vue Package and register the same using Vue.use() with Component Plugin as its argument.

Refer the code snippet given below.

import { InPlaceEditorPlugin } from '@syncfuion/ej2-vue-inplace-editor';

Vue.use(InPlaceEditorPlugin);

By Registering Component Plugin in Vue, all child directives are also globally registered.

Using Vue.component()

Import the Component and Component Plugin from EJ2 Vue Package, register the same using the Vue.component() with name of Component from ComponentPlugin and the EJ2 Vue Component as its arguments.

Refer the code snippet given below.

import { InPlaceEditorComponent, InPlaceEditorPlugin } from '@syncfusion/ej2-vue-inplace-editor';

Vue.component(InPlaceEditorPlugin.name, InPlaceEditorComponent);

Note: By using Vue.component(), only the EJ2 Vue Component is registered. Child directives needs to be registered separately.

Creating Vue Sample

Add the EJ2 Vue In-place Editor using <ejs-inplaceeditor> to the <template> section of the App.vue file in src directory, the content attribute of the In-place Editor component is provided as name in data option in the <script> section.

<template>
  <div id="app">
    <ejs-inplaceeditor id="inplace_editor" type="Text" value="Andrew" :model="model">
    </ejs-inplaceeditor>
  </div>
</template>

<script>
import Vue from 'vue';
import { InPlaceEditorPlugin } from '@syncfusion/ej2-vue-inplace-editor';

Vue.use(InPlaceEditorPlugin);
export default {
  name: 'app',
  data () {
    return {
      model: {
          placeholder: 'Enter employee name'
      },
    }
  }
}
</script>

Adding CSS Reference

Add In-place Editor component’s styles as given below in <style> section of the App.vue file.

<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";
</style>

Add the In-place Editor with Textbox

By default, TextBox component is rendered in In-place Editor with 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 Vue from 'vue';
import { InPlaceEditorPlugin } from '@syncfusion/ej2-vue-inplace-editor';

Vue.use(InPlaceEditorPlugin);
export default {
  name: 'app',
  data: function(){
    return {
      model: {
          placeholder: 'Enter employee name'
      },
    }
  }
}
</script>

Configure DropDownList

You can render DropDownList by changing type property as DropDownList and configure its properties and methods using model property.

In the below sample, type and model values are configured to render the DropDownList control.

<template>
  <div id="app">
    <ejs-inplaceeditor id="element" type="DropDownList" mode= "Inline" :model="model">
    </ejs-inplaceeditor>
  </div>
</template>

<script>
import Vue from 'vue';
import { InPlaceEditorPlugin } from '@syncfusion/ej2-vue-inplace-editor';

Vue.use(InPlaceEditorPlugin);
export default {
  name: 'app',
  data () {
    return {
      model: {
           genderData: ['Male', 'Female'],
           placeholder: 'Select gender'
      },
    }
  }
}
</script>

Integrate DatePicker

You can render DatePicker by changing 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 control.

<template>
  <div id="app">
    <ejs-inplaceeditor id="inplace_editor" type="Date" :model="model" :value="value">
    </ejs-inplaceeditor>
  </div>
</template>

<script>
import Vue from 'vue';
import { InPlaceEditorPlugin } from '@syncfusion/ej2-vue-inplace-editor';

Vue.use(InPlaceEditorPlugin);
export default {
  name: 'app',
  data () {
    return {
      value: new Date('04/12/2018'),
      model: {
            showTodayButton: true
      },
    }
  }
}
</script>

Run the application

Now run the npm run dev command in the console, it will build your application and open in the browser.

Source
Preview
app.vue
<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 Vue from 'vue';
import { InPlaceEditorPlugin } from '@syncfusion/ej2-vue-inplace-editor';

Vue.use(InPlaceEditorPlugin);
export default {
  name: 'app',
  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-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";
</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 are used by DataManager to communicate with DataSource.
primarykey Defines the unique primary key of editable field which can be used for saving data in data-base.

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.

Source
Preview
app.vue
<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 Vue from 'vue';
import { InPlaceEditorPlugin, MultiSelect, ActionEventArgs } from '@syncfusion/ej2-vue-inplace-editor';

Vue.use(InPlaceEditorPlugin);
export default {
  name: 'app',
  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: {
    created: function() {
      this.newValue = this.$refs.newValue;
      this.oldValue = this.$refs.oldValue;
    },
    actionSuccess: function(e){
      this.oldValue.textContent =  this.newValue.textContent;
      this.newValue.textContent = e.value;
    }
  },
  provide:{
        "inplaceeditor":[MultiSelect]
  }
}
</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";
</style>

<style>

.e-inplaceeditor {
    min-width: 200px;
    text-align: left
}

</style>