Components in Vue Inplace editor component

11 Jun 202424 minutes to read

In-place Editor renders various components based on the type property and it have built-in and injectable component. To use injectable components, inject the required modules into In-place Editor. 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 components are rendered.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
    <div id="app">
        <div id='container'>
            <h3> Built-in Components </h3>
            <table class="table-section">
                <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">
                        <ejs-inplaceeditor id="date" mode="Inline" type="Date" :model="dateModel"
                            :value="datePickerValue">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="dateTime" mode="Inline" type="DateTime" :model="datetimeModel"
                            :value="dateTimeValue">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="dropDowns" mode="Inline" type="DropDownList" :model="dropdownModel"
                            value="Android">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="masked" type="Mask" mode="Inline" :model="maskModel" value="123-345-678">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="numeric" type="Numeric" mode="Inline" :model="numericModel" value=10>
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="textbox" type="Text" mode="Inline" :model="textModel" value="Andrew">
                        </ejs-inplaceeditor>
                    </td>
                </tr>
            </table>
            <h3> Injectable Components </h3>
            <table class="table-section">
                <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">
                        <ejs-inplaceeditor id="autoComplete" type="AutoComplete" mode="Inline"
                            :model="autocompleteModel" value="Android">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="color" type="Color" mode="Inline" value="#81aefd">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="combobox" type="ComboBox" mode="Inline" :model="textModel"
                            value="Android">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="dateRange" type="DateRange" mode="Inline" :model="dateRangeModel"
                            :value="dateRangeValue">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="multiselect" type="MultiSelect" mode="Inline" :model="multiselectModel"
                            :value="multivalue">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="rte" type="RTE" :model="rteModel" mode="Inline"
                            value="<p>Enter your content here</p>">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="slider" type="Slider" mode="Inline" value=20>
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="time" type="Time" mode="Inline" :model="timeModel" :value="timeValue">
                        </ejs-inplaceeditor>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script setup>

import { InPlaceEditorComponent as EjsInplaceeditor, TimePicker, DateRangePicker, Rte, MultiSelect, AutoComplete, ComboBox, ColorPicker, Slider } from '@syncfusion/ej2-vue-inplace-editor';

const frameWorkList = ['Android', 'JavaScript', 'jQuery', 'TypeScript', 'Angular', 'React', 'Vue', 'Ionic'];

const dateModel = {
    placeholder: 'Select date'
};
const datetimeModel = {
    placeholder: 'Select dateTime'
};
const dropdownModel = {
    placeholder: 'Select frameWorks',
    dataSource: frameWorkList
};
const maskModel = {
    mask: '000-000-000'
};
const numericModel = {
    placeholder: 'Enter Number'
};
const textModel = {
    placeholder: 'Enter Some Text'
};
const dateRangeModel = {
    placeholder: 'Select date'
};
const autocompleteModel = {
    placeholder: 'Select frameWorks',
    dataSource: frameWorkList
};
const rteModel = {
    placeholder: 'Enter your content here'
};
const timeModel = {
    placeholder: 'Select time'
};
const multiselectModel = {
    placeholder: 'Select frameWorks',
    dataSource: frameWorkList
};
const datePickerValue = new Date('11/23/2018');
const timeValue = new Date('11/23/2018 12:00 PM');
const dateTimeValue = new Date('11/23/2018 12:30 PM');
const dateRangeValue = [new Date('11/12/2018'), new Date('11/15/2018')];
const multivalue = ['Android'];

provide("inplaceeditor", [TimePicker, DateRangePicker, Rte, MultiSelect, AutoComplete, ComboBox, ColorPicker, Slider]);

</script>

<style>
@import "https://ej2.syncfusion.com/vue/documentation/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";

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

body {
    padding: 20px0
}

.control-title {
    font-weight: 600;
    padding-right: 20px;
}

td {
    height: 80px;
}

trtd:first-child {
    text-align: right;
}

trtd:last-child {
    text-align: left;
}

.table-section {
    margin: 0 auto;
}

h3 {
    text-align: center;
    font-size: 24px;
}
</style>
<template>
    <div id="app">
        <div id='container'>
            <h3> Built-in Components </h3>
            <table class="table-section">
                <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">
                        <ejs-inplaceeditor id="date" mode="Inline" type="Date" :model="dateModel"
                            :value="datePickerValue">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="dateTime" mode="Inline" type="DateTime" :model="datetimeModel"
                            :value="dateTimeValue">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="dropDowns" mode="Inline" type="DropDownList" :model="dropdownModel"
                            value="Android">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="masked" type="Mask" mode="Inline" :model="maskModel" value="123-345-678">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="numeric" type="Numeric" mode="Inline" :model="numericModel" value=10>
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="textbox" type="Text" mode="Inline" :model="textModel" value="Andrew">
                        </ejs-inplaceeditor>
                    </td>
                </tr>
            </table>
            <h3> Injectable Components </h3>
            <table class="table-section">
                <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">
                        <ejs-inplaceeditor id="autoComplete" type="AutoComplete" mode="Inline"
                            :model="autocompleteModel" value="Android">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="color" type="Color" mode="Inline" value="#81aefd">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="combobox" type="ComboBox" mode="Inline" :model="textModel"
                            value="Android">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="dateRange" type="DateRange" mode="Inline" :model="dateRangeModel"
                            :value="dateRangeValue">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="multiselect" type="MultiSelect" mode="Inline" :model="multiselectModel"
                            :value="multivalue">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="rte" type="RTE" :model="rteModel" mode="Inline"
                            value="<p>Enter your content here</p>">
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="slider" type="Slider" mode="Inline" value=20>
                        </ejs-inplaceeditor>
                    </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">
                        <ejs-inplaceeditor id="time" type="Time" mode="Inline" :model="timeModel" :value="timeValue">
                        </ejs-inplaceeditor>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>

import { InPlaceEditorComponent, TimePicker, DateRangePicker, Rte, MultiSelect, AutoComplete, ComboBox, ColorPicker, Slider } 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 {
            dateModel: {
                placeholder: 'Select date'
            },
            datetimeModel: {
                placeholder: 'Select dateTime'
            },
            dropdownModel: {
                placeholder: 'Select frameWorks',
                dataSource: frameWorkList
            },
            maskModel: {
                mask: '000-000-000'
            },
            numericModel: {
                placeholder: 'Enter Number'
            },
            textModel: {
                placeholder: 'Enter Some Text'
            },
            dateRangeModel: {
                placeholder: 'Select date'
            },
            autocompleteModel: {
                placeholder: 'Select frameWorks',
                dataSource: frameWorkList
            },
            rteModel: {
                placeholder: 'Enter your content here'
            },
            timeModel: {
                placeholder: 'Select time'
            },
            multiselectModel: {
                placeholder: 'Select frameWorks',
                dataSource: frameWorkList
            },
            datePickerValue: new Date('11/23/2018'),
            timeValue: new Date('11/23/2018 12:00 PM'),
            dateTimeValue: new Date('11/23/2018 12:30 PM'),
            dateRangeValue: [new Date('11/12/2018'), new Date('11/15/2018')],
            multivalue: ['Android']
        }
    },
    provide: {
        inplaceeditor: [TimePicker, DateRangePicker, Rte, MultiSelect, AutoComplete, ComboBox, ColorPicker, Slider]
    }
}
</script>

<style>
@import "https://ej2.syncfusion.com/vue/documentation/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";

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

body {
    padding: 20px0
}

.control-title {
    font-weight: 600;
    padding-right: 20px;
}

td {
    height: 80px;
}

trtd:first-child {
    text-align: right;
}

trtd:last-child {
    text-align: left;
}

.table-section {
    margin: 0 auto;
}

h3 {
    text-align: center;
    font-size: 24px;
}
</style>

Model configuration

Components 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 component at In-place Editor.

    model: {
        showTodayButton: true,
        placeholder: 'Select Date'
    }

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div id="app">
    <ejs-inplaceeditor id="inplace_editor" type="Date" :value="datepickerValue" :model="model">
    </ejs-inplaceeditor>
  </div>
</template>

<script setup>

import { InPlaceEditorComponent as EjsInplaceeditor } from '@syncfusion/ej2-vue-inplace-editor';

const datepickerValue = new Date('04/12/2018');
const dateModel = {
  showTodayButton: true,
  placeholder: 'Select Date'
}
</script>
<template>
  <div id="app">
    <ejs-inplaceeditor id="inplace_editor" type="Date" :value="datepickerValue" :model="model">
    </ejs-inplaceeditor>
  </div>
</template>

<script>

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

export default {
  name: 'app',
  components: {
    'ejs-inplaceeditor': InPlaceEditorComponent
  },
  data() {
    return {
      datepickerValue: new Date('04/12/2018');
      dateModel: {
        showTodayButton: true,
        placeholder: 'Select Date'
      },
    }
  }
}
</script>

Components in Vue Inplace editor component

Model configuration

See Also