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.

index.js
index.html
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/28.1.33/material.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/28.1.33/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.

index.js
index.html
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/28.1.33/material.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/28.1.33/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.

index.js
index.html
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/28.1.33/material.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/28.1.33/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>