Localization of HTML5 JavaScript Report Viewer allows you to localize the static text such as tooltip, parameter block, and dialog text based on a specific culture. To render the static text with specific culture, refer to the following corresponding culture script files and set culture name to the locale
property of the Report Viewer.
* `ej.localetexts.fr-FR.min.js`
* `ej.culture.fr-FR.min.js`
Refer this CDN links for Localization and Culture to get the Localization and Culture scripts for available Culture Code
Refer the ej.localetexts.fr-FR.min.js
from cdn using the following code.
<script src="https://cdn.boldreports.com/5.4.20/scripts/l10n/ej.localetexts.fr-FR.min.js"></script>
Refer the ej.culture.fr-FR.min.js
from cdn using the following code.
<script src="https://cdn.boldreports.com/5.4.20/scripts/i18n/ej.culture.fr-FR.min.js"></script>
Whether you want to get the localization script as local then install the
BoldReports.Global
NuGet package in your application.
<script src="scripts/l10n/ej.localetexts.fr-FR.min.js"></script>
<script src="scripts/i18n/ej.culture.fr-FR.min.js"></script>
You can edit and preview the Report Viewer localization using the following.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Localization</title>
<meta name="description" content="Render the report in french locale" />
<link rel="shortcut icon" href="favicon.ico" />
<link href="https://cdn.boldreports.com/5.4.20/content/material/bold.reports.all.min.css" rel="stylesheet" />
<link href="https://cdn.boldreports.com/5.4.20/content/material/bold.reportdesigner.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.boldreports.com/external/jsrender.min.js"></script>
<!-- Gauge -->
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej2-circulargauge.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej2-maps.min.js"></script>
<!-- Reports -->
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.widgets.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.report-designer-widgets.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/bold.report-viewer.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/bold.report-designer.min.js"></script>
<!-- Data Visulaization -->
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej.bulletgraph.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej.chart.min.js"></script>
<!-- Codemirror -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/addon/hint/show-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/addon/hint/sql-hint.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/mode/sql/sql.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/mode/vb/vb.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/codemirror.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.47.0/addon/hint/show-hint.css" rel="stylesheet" />
</head>
<body>
<div class="splash">
<div class="message">JavaScript Reports</div>
<div class="loader">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
</div>
<style>
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
width: 100%;
overflow: hidden;
}
ej-sample,
ej-reportdesigner {
display: block;
height: inherit;
width: inherit;
}
.splash {
position: absolute;
left: 50%;
top: 50%;
transform: translateY(-50%) translateX(-50%);
}
.message {
text-align: center;
font-size: 40px;
margin-bottom: 20px;
}
.loader {
margin: auto;
width: 70px;
text-align: center;
position: relative;
}
.loader>div {
width: 18px;
height: 18px;
background-color: black;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.loader .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
}
40% {
-webkit-transform: scale(1);
}
}
@keyframes sk-bouncedelay {
0%,
80%,
100% {
-webkit-transform: scale(0);
transform: scale(0);
}
40% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
</style>
<script src="http://cdn.boldreports.com/5.4.20/scripts/l10n/ej.localetexts.fr-FR.min.js"></script>
<script src="http://cdn.boldreports.com/5.4.20/scripts/i18n/ej.culture.fr-FR.min.js"></script>
<div id="viewer"></div>
<script src="index.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.getElementsByClassName("splash")[0].style.display = "None";
});
</script>
</body>
</html>
$(function () {
var dataValue = "";
var apiRequest = new Object({
password: "demo",
userid: "guest"
});
$.ajax({
type: "POST",
url: "https://on-premise-demo.boldreports.com/api/get-user-key",
data: apiRequest,
success: function (data) {
dataValue = data.Token;
var token = JSON.parse(dataValue);
$("#viewer").boldReportViewer(
{
reportServiceUrl: "https://on-premise-demo.boldreports.com/ReportService/api/Viewer",
serviceAuthorizationToken: token.token_type + " " + token.access_token,
reportPath: '/Sample Reports/Sales Order Detail',
//Render Report Viewer in French locale
locale: "fr-FR"
});
}
});
});