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 classic web report designer, localized strings appropriate to each culture are stored in separate files and loaded according to the UI culture setting.

This section explains steps to localize Bold Reports® Designer version less than v5.2.xx.

By default classic 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 classic Report Designer.

  • ej.localetexts.fr-FR.min.js
  • ej.culture.fr-FR.min.js

  1. Install BoldReports.Global Nuget package in your MVC application.

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

    <script src="~/Scripts/bold-reports/l10n/reportdesigner/ej.localetexts.fr-FR.min.js"></script>

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

        <script src="~/Scripts/bold-reports/i18n/ej.culture.fr-FR.min.js"></script>

  4. To render the localization classic Report Designer, use the following code snippet.

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

      @using BoldReports.Mvc

@{
    ViewBag.Title = "Index";
}
<div style="height:600px">
    @(Html.Bold().ReportDesigner("designer").ServiceUrl("/api/ReportingAPI").Locale("fr-FR"))
</div>

    • 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>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/bold-reports/material/bold.reports.all.min.css")
    @Styles.Render("~/Content/bold-reports/material/bold.reportdesigner.min.css")
    @Styles.Render("~/Scripts/CodeMirror/lib/codemirror.css")
    @Styles.Render("~/Scripts/CodeMirror/addon/hint/show-hint.css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body style="height:100%;width:100%;padding:0;">
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/Scripts/jsrender.min.js")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/Scripts/CodeMirror/lib/codemirror.js")
    @Scripts.Render("~/Scripts/CodeMirror/addon/hint/show-hint.js")
    @Scripts.Render("~/Scripts/CodeMirror/addon/hint/sql-hint.js")
    @Scripts.Render("~/Scripts/CodeMirror/mode/sql/sql.js")
    @Scripts.Render("~/Scripts/CodeMirror/mode/vb/vb.js")
    @Scripts.Render("~/Scripts/bold-reports/common/bold.reports.common.min.js")
    @Scripts.Render("~/Scripts/bold-reports/common/bold.reports.widgets.min.js")
    @Scripts.Render("~/Scripts/bold-reports/common/bold.report-designer-widgets.min.js")
    <!--Renders the chart item. Add this script, only if your report contains the chart report item.-->
    @Scripts.Render("~/Scripts/bold-reports/data-visualization/ej.chart.min.js")
    <!-- Report Designer component script-->
    @Scripts.Render("~/Scripts/bold-reports/bold.report-viewer.min.js")
    @Scripts.Render("~/Scripts/bold-reports/bold.report-designer.min.js")
    @Scripts.Render("~/Scripts/bold-reports/l10n/reportdesigner/ej.localetexts.fr-FR.min.js")
    @Scripts.Render("~/Scripts/bold-reports/i18n/ej.culture.fr-FR.min.js")
    <div class="container body-content" style="height:100%;width:100%;">
        @RenderBody()
        @Html.Bold().ScriptManager()
    </div>
    @RenderSection("scripts", required: false)
</body>
</html>