Localization in EJ2 JavaScript In place editor control
8 Aug 202310 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.
ej.base.L10n.load({
'fr-BE': {
'inplace-editor': {
'save': 'enregistrer',
'cancel': 'Annuler',
'editIcon': 'Cliquez pour éditer',
'editAreaClick': 'Cliquez pour éditer',
'editAreaDoubleClick': 'Double-cliquez pour éditer'
}
}
});
var editableOnData = ['Click', 'DblClick', 'EditIconClick'];
var dropDownObj = new ej.dropdowns.DropDownList({
dataSource: editableOnData,
width: 'auto',
value: 'Click',
change: onChange,
placeholder: 'Select edit type'
});
dropDownObj.appendTo('#dropDown');
var editObj = new ej.inplaceeditor.InPlaceEditor({
mode: 'Inline',
value: 'Andrew',
locale: 'fr-BE',
model: {
placeholder: 'Enter some text'
}
});
editObj.appendTo('#element');
function onChange(e) {
var editType = e.itemData.value;
editObj.editableOn = editType;
editObj.dataBind();
}
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 In-place Editor</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript In-place Editor Control">
<meta name="author" content="Syncfusion">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<table class="table-section">
<tbody><tr>
<td> EditableOn: </td>
<td>
<div id="dropDown"></div>
</td>
</tr>
<tr>
<td class="sample-td"> Enter your name: </td>
<td class="sample-td">
<div id="element"></div>
</td>
</tr>
</tbody></table>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Right to left
Specifies the direction of the In-place Editor control 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.
ej.base.enableRipple(true);
//Initialize In-place Editor control
var editObj = new ej.inplaceeditor.InPlaceEditor({
mode: 'Inline',
value: 'Andrew',
enableRtl: true
});
//Render initialized In-place Editor control
editObj.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 In-place Editor</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript In-place Editor Control">
<meta name="author" content="Syncfusion">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<span class="content-title"> Enter your name: </span>
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Format
Formatting is a way of representing the value in different format. You can format the following mentioned controls with its format
property, when it passed through the In-place Editor model property.
ej.base.enableRipple(true);
//Initialize In-place Editor control
var editObj = new ej.inplaceeditor.InPlaceEditor({
type: 'Date',
value: new Date('11/23/2018'),
model: {
placeholder: 'Select date',
format: 'yyyy-MM-dd'
}
});
//Render initialized In-place Editor control
editObj.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
<title>Essential JS 2 In-place Editor</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Typescript In-place Editor Control">
<meta name="author" content="Syncfusion">
<link href="https://cdn.syncfusion.com/ej2/27.1.48/material.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<span class="content-title"> Select date: </span>
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>