- Localization
- Right to left
- Format
Contact Support
Localization in Vue Inplace editor component
11 Jun 202420 minutes to read
Localization
Localization library allows you to localize the default text content of the In-place Editor to different cultures using the locale property. In-place Editor following keys will be localize based on culture.
Locale key | en-US (default) |
---|---|
save | Close |
cancel | Cancel |
loadingText | Loading… |
editIcon | Click to edit |
editAreaClick | Click to edit |
editAreaDoubleClick | Double click to edit |
To load translation object in an application use load
function of L10n
class. In the following sample, French
culture is set to In-place Editor and change the tooltip text.
<template>
<div id="app">
<table class="table-section">
<tr>
<td>EditableOn:</td>
<td>
<ejs-dropdownlist ref="editableOn" id="editableon" width='90%' :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" locale='fr-BE'>
</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";
import { L10n } from '@syncfusion/ej2-base';
L10n.load({
'fr-BE': {
'inplace-editor': {
'save': 'enregistrer',
'cancel': 'Annuler',
'loadingText': 'Chargement...',
'editIcon': 'Cliquez pour éditer',
'editAreaClick': 'Cliquez pour éditer',
'editAreaDoubleClick': 'Double-cliquez pour éditer'
}
}
});
const editObj = ref(null);
const editableOn = ref(null);
const textModel = {
placeholder: 'Enter employee name'
};
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 (args) {
let editable = editableOn.value.ej2Instances.value;
editObj.value.editableOn = editable;
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" width='90%' :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" locale='fr-BE'>
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { L10n } from '@syncfusion/ej2-base';
L10n.load({
'fr-BE': {
'inplace-editor': {
'save': 'enregistrer',
'cancel': 'Annuler',
'loadingText': 'Chargement...',
'editIcon': 'Cliquez pour éditer',
'editAreaClick': 'Cliquez pour éditer',
'editAreaDoubleClick': 'Double-cliquez pour éditer'
}
}
});
export default {
name: "App",
components: {
"ejs-dropdownlist": DropDownListComponent,
"ejs-inplaceeditor": InPlaceEditorComponent
},
data() {
return {
textModel: {
placeholder: 'Enter employee name'
},
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 (args) {
let editableOn = this.$refs.editableOn.ej2Instances.value;
this.$refs.editObj.editableOn = editableOn;
this.$refs.editObj.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>
Right to left
Specifies the direction of the In-place Editor component using the enableRtl property. For writing systems that require it like Arabic, Hebrew, etc., the direction can be switched to right-to-left.
It will not change based on the locale property.
<template>
<div id="app">
<table class="table-section">
<tr>
<td>Enter your name:</td>
<td>
<ejs-inplaceeditor ref="editObj" id="editor" mode="Inline" value='Andrew' enableRtl=true>
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</template>
<script setup>
import { InPlaceEditorComponent as EjsInplaceeditor } from '@syncfusion/ej2-vue-inplace-editor';
</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;
}
</style>
<template>
<div id="app">
<table class="table-section">
<tr>
<td>Enter your name:</td>
<td>
<ejs-inplaceeditor ref="editObj" id="editor" mode="Inline" value='Andrew' enableRtl=true>
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';
export default {
name: "App",
components: {
"ejs-inplaceeditor": InPlaceEditorComponent
}
}
</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;
}
</style>
Format
Formatting is a way of representing the value in different format. You can format the following mentioned components with its format
property, when it passed through the In-place Editor model property.
<template>
<div id="app">
<table class="table-section">
<tr>
<td>select date: </td>
<td>
<ejs-inplaceeditor ref="dateObj" id="datePickerEle" mode="Inline" type="Date"
:value="datePickerValue" :model="datePickerModel">
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</template>
<script setup>
import { InPlaceEditorComponent as EjsInplaceeditor } from '@syncfusion/ej2-vue-inplace-editor';
const datePickerModel = {
placeholder: 'Select date',
format: 'yyyy-MM-dd'
};
const datePickerValue = new Date('11/23/2018');
</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;
}
</style>
<template>
<div id="app">
<table class="table-section">
<tr>
<td>select date: </td>
<td>
<ejs-inplaceeditor ref="dateObj" id="datePickerEle" mode="Inline" type="Date"
:value="datePickerValue" :model="datePickerModel">
</ejs-inplaceeditor>
</td>
</tr>
</table>
</div>
</template>
<script>
import { InPlaceEditorComponent } from '@syncfusion/ej2-vue-inplace-editor';
export default {
name: "App",
components: {
"ejs-inplaceeditor": InPlaceEditorComponent
},
data() {
return {
datePickerModel: {
placeholder: 'Select date',
format: 'yyyy-MM-dd'
},
datePickerValue: new Date('11/23/2018'),
};
}
}
</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;
}
</style>