Localization Classic Report Designer

To localize the classic Bold Reports® ASP.NET Core Report Designer, refer the culture script files for your culture and set the culture name to the locale property. Localization is the process of customizing the application for a given culture and locale, which involves much more than the simple translation of text. In the classic Report Designer, localized strings appropriate to each culture are stored in separate files and loaded according to the UI culture setting.

Use these steps to localize the Bold Reports® Designer version less than v5.2.xx.

By default, the classic Report Designer displays 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 classic 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="https://cdn.boldreports.com/15.1.10/scripts/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="https://cdn.boldreports.com/15.1.10/scripts/i18n/ej.culture.fr-FR.min.js"></script>

  3. To render the localization for classic Report Designer, use the following code snippet:

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

          <bold-report-designer id="designer" service-url="/api/ReportingAPI" locale="fr-FR"></bold-report-designer>

    • The following code example illustrates how to add classic 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>@ViewData["Title"] - Render Report Designer in French localization</title>

    <environment include="Development">
        <link href="https://cdn.boldreports.com/15.1.10/content/material/bold.reports.all.min.css" rel="stylesheet" />
        <link href="https://cdn.boldreports.com/15.1.10/content/material/bold.reportdesigner.min.css" rel="stylesheet" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />
        <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />
    </environment>
</head>
<body style="height:100%;width:100%;padding:0;">
    <environment include="Development">
        <script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
        <script src="https://cdn.boldreports.com/external/jsrender.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/mode/vb/vb.min.js" type="text/javascript"></script>
        <script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.common.min.js"></script>
        <script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.widgets.min.js"></script>
        <script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.report-designer-widgets.min.js"></script>
        <!--Chart component script added before the Report Designer and viewer script to render report with chart report item-->
        <script src="https://cdn.boldreports.com/15.1.10/scripts/data-visualization/ej.chart.min.js"></script>
        <script src="https://cdn.boldreports.com/15.1.10/scripts/bold.report-viewer.min.js" type="text/javascript"></script>
        <script src="https://cdn.boldreports.com/15.1.10/scripts/bold.report-designer.min.js" type="text/javascript"></script>
        <script src="https://cdn.boldreports.com/15.1.10/scripts/l10n/reportdesigner/ej.localetexts.fr-FR.min.js"></script>
        <script src="https://cdn.boldreports.com/15.1.10/scripts/i18n/ej.culture.fr-FR.min.js"></script>
    </environment>
    <div class="container body-content" style="height:100%;width:100%;">
        @RenderBody()
        <bold-script-manager></bold-script-manager>
    </div>
@RenderSection("Scripts", required: false)
</body>
</html>

See also