Search results

Localization

Localization library allows to localize the default text content of Dialog. In Dialog, The close button’s tooltip text alone will be localize based on culture. By using locale property you can the culture dynamically in dialog component.

Locale key en-US (default)
close Close

Loading translations

To load translation object in an application use load function of L10n class.

In the below sample, French culture is set to Dialog and change the close button’s tooltip text.

Source
Preview
index.js
index.html
styles.css
ej.base.enableRipple(true);

// Load French culture for Dialog close button tooltip text
ej.base.L10n.load({
    'fr-BE': {
       'dialog': {
             'close': "Fermer"
         }
     }
});

// Initialization of Dialog component
var dialog = new ej.popups.Dialog({
    // Set the locale culture
    locale: 'fr-BE',
    // Enables the header
    header: 'Dialogue',
    // Enables the close icon button in header
    showCloseIcon: true,
    // Dialog content
    content: 'Dialogue avec la culture française',
    // The Dialog shows within the target element
    target: document.getElementById("container"),
    // Dialog width
    width: '250px',
});
// Render initialized Dialog
dialog.appendTo('#dialog');

// Sample level code to handle the button click action
document.getElementById('targetButton').onclick = function() {
    // Call the show method to open the Dialog
     dialog.show();
}
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Dialog with locale support</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="TypeScript UI Components">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button class="e-control e-btn" id="targetButton" role="button" e-ripple="true" style="position: absolute;">Open Dialog</button>
        <div id="dialog"></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>
html,
body,    
#container {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

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