Search results

Localization

Localization is the process of customizing the application for a given culture and locale - involving much more than the simple translation of text. In web report designer, localized strings appropriate to each culture are stored in separate files and loaded according to the UI culture setting.

By default report designer display strings in US English(en-US).

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 Designer.

  • ej.localetexts.fr-FR.min.js
  • ej.culture.fr-FR.min.js
  1. Refer to the ej.localetexts.fr-FR.min.js script file from the Scripts folder of your application.

    <script src="~/Scripts/reports/l10n/reportdesigner/ej.localetexts.fr-FR.min.js"></script>
  2. Refer to the ej.culture.fr-FR.min.js script file from the Scripts folder of your application.

        <script src="~/Scripts/reports/i18n/ej.culture.fr-FR.min.js"></script>
  3. To render the localization Report Designer, use the following code snippet.

    • The following code example illustrates how to set the locale property for Report Designer in the Index.cshtml page.

      @using Syncfusion.Reporting.Mvc
      
      @{
          ViewBag.Title = "Index";
      }
      <div style="height:600px">
          @(Html.SF().ReportDesigner("designer").ServiceUrl("/api/ReportingAPI").Locale("fr-FR"))
      </div>
    • The following code example illustrates how to add Report Designer localization scripts in the layout page.

        <!DOCTYPE html>
        <html>
        <head>
            <meta charset="utf-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>Render Report Designer in French localization</title>
            <link href="~/Content/reports/default-theme/ej.reports.all.min.css" rel="stylesheet" />
            <link href="~/Content/reports/default-theme/ej.reportdesigner.min.css" rel="stylesheet" />
            <script src="~/Scripts/CodeMirror/lib/codemirror.css"></script>
            <script src="~/Scripts/CodeMirror/addon/hint/show-hint.css"></script>
            <script src="https://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js" type="text/javascript"></script>
            <script src="https://cdn.syncfusion.com/js/assets/external/jsrender.min.js" type="text/javascript"></script>
            <script src="~/Scripts/CodeMirror/lib/codemirror.js"></script>
            <script src="~/Scripts/CodeMirror/addon/hint/show-hint.js"></script>
            <script src="~/Scripts/CodeMirror/addon/hint/sql-hint.js"></script>
            <script src="~/Scripts/CodeMirror/mode/sql/sql.js"></script>
            <script src="~/Scripts/CodeMirror/mode/vb/vb.js"></script>
            <script src="~/Scripts/reports/common/ej.reporting.common.min.js"></script>
            <script src="~/Scripts/reports/common/ej.reporting.widgets.min.js"></script>
            <script src="~/Scripts/reports/common/ej.report-designer-widgets.min.js"></script>
            <!--Chart component script added before the report designer script to render chart report item in reports-->
            <script src="~/Scripts/reports/data-visualization/ej.chart.min.js"></script>
            <!-- Report Viewer component script-->
            <script src="~/Scripts/reports/ej.report-viewer.min.js"></script>
            <!-- Report Designer component script-->
            <script src="~/Scripts/reports/ej.report-designer.min.js"></script>
            <script src="~/Scripts/reports/l10n/reportdesigner/ej.localetexts.fr-FR.min.js"></script>
            <script src="~/Scripts/reports/i18n/ej.culture.fr-FR.min.js"></script>
        </head>
        <body style="height:100%;width:100%;padding:0;">
            <div class="container body-content" style="height:100%;width:100%;">
                @RenderBody()
                @Html.SF().ScriptManager()
            </div>
            @RenderSection("scripts", required: false)
        </body>
        </html>