Search results

Localization

You can localize the Report Viewer static text and tooltip. To render the static text with specific culture, refer 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`
  1. Refer the ej.localetexts.fr-FR.min.js from cdn using the following code.

    <script src="http://cdn.syncfusion.com/4.1.0.25/js/reports/l10n/ej.localetexts.fr-FR.min.js"></script>
  2. Refer the ej.culture.fr-FR.min.js from cdn using the following code.

    <script src="http://cdn.syncfusion.com/js/assets/i18n/ej.culture.fr-FR.min.js"></script>
  3. You can edit and preview the Report Viewer localization using the following.

index.html
index.js
<!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.syncfusion.com/4.1.0.25/js/reports/material/ej.reports.all.min.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/4.1.0.25/js/reports/material/ej.reportdesigner.min.css" rel="stylesheet" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>

    <!-- Reports -->
    <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/common/ej.reporting.common.min.js"></script>
    <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/common/ej.reporting.widgets.min.js"></script>
    <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/common/ej.report-designer-widgets.min.js"></script>
    <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/ej.report-viewer.min.js"></script>
    <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/ej.report-designer.min.js"></script>

    <!-- Data Visulaization -->
    <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/data-visualization/ej.bulletgraph.min.js"></script>
    <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/data-visualization/ej.chart.min.js"></script>
    <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/data-visualization/ej.circulargauge.min.js"></script>
    <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/data-visualization/ej.lineargauge.min.js"></script>
    <script src="https://cdn.syncfusion.com/4.1.0.25/js/reports/data-visualization/ej.map.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.syncfusion.com/4.1.0.25/js/reports/l10n/ej.localetexts.fr-FR.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/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://reportserver.syncfusion.com/api/get-user-key",
                    data: apiRequest,
                    success: function (data) {
                        dataValue = data.Token;
                        var token = JSON.parse(dataValue);

                        $("#viewer").ejReportViewer(
                            {
                                reportServiceUrl: "https://reportserver.syncfusion.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"
                            });
                    }
                });
            });