Localization - ASP.NET MVC Report Designer

• Apr 26, 2024
• 5 minutes to read

You can localize the Web End-User Report Designer UI and use the Report Designer to localize the reports.

Localize Web End-User Report Designer UI

To localize the Web End-User Report Designer user interface (UI), use the built-in localization mechanisms and substitute localization strings. Localization strings can be loaded either from JSON dictionary files, or using satellite resource assemblies.

Use JSON Dictionaries

Obtain Dictionaries

You need to load three JSON dictionaries:

1. <Locale>.json. Enables you to localize DevExtreme editors that are part of the Reporting component. The list of dictionaries is available on GitHub. For more information, review the following help topic: DevExtreme jQuery - Localization.
2. dx-analytics-core.<.Locale>.json. This dictionary is the core localization part. This dictionary is included in a zip-archive that you can obtain using the DevExpress Localization Service. For more information, review the following help topic: DevExpress UI Localization Service.
3. dx-reporting.<.Locale>.json. This dictionary contains Designer-specific elements. This dictionary is included in a zip-archive that you can obtain using the DevExpress Localization Service. For more information, review the following help topic: DevExpress UI Localization Service.

In the file names above, the <Locale> is the locale of the dictionary contents.

Use Dictionaries

To localize the application UI, you should do the following:

1. Localize dates, numbers, currencies, and Devextreme widgets using DevExpress.localization.locale(<Locale>) as described in the following help topic: DevExtreme jQuery - Localization.
2. Subscribe to the CustomizeLocalization event and load the dx-analytics-core.<.Locale>.json and dx-reporting.<.Locale>.json dictionaries using the LoadMessages(messages) method.

Use Satellite Resource Assemblies

You can localize the Web End-User Report Designer with the Satellite Resource Assemblies (libraries that contain translated resources).

For more information, review the following help topic: Localize ASP.NET Controls with Satellite Resource Assemblies.

Substitute Localization Strings

View Example: Reporting for Web Forms - Report Designer and Document Viewer Localization

Use the UpdateLocalization method in the client-side ASPxClientReportDesigner.CustomizeLocalization event handler to substitute a particular localization string with the specified text.

Tip

You can use the satellite resource assemblies to translate text strings and then adjust the translation by handling the CustomizeLocalization event.

CSHTML

@Html.DevExpress().ReportDesigner(settings => {
    settings.Name = "ReportDesigner";
    settings.ClientSideEvents.CustomizeLocalization = "function(s) { " +
        "s.UpdateLocalization({"+
            "'Properties': 'Eigenschaften',"+
            "'Data Source': 'Datenquelle',"+
            "'Data Member': 'Datenelement'});}";
}).Bind(new XtraReport()).GetHtml()

VBHTML

@Html.DevExpress().ReportDesigner(Sub(settings)
    settings.Name = "ReportDesigner"
    settings.ClientSideEvents.CustomizeLocalization = "function(s) { " & 
        "s.UpdateLocalization({" & 
            "'Properties': 'Eigenschaften'," & 
            "'Data Source': 'Datenquelle'," & 
            "'Data Member': 'Datenelement'});}"
End Sub).Bind(New XtraReport()).GetHtml()

Important

Localization strings are case sensitive. A string is translated if you use correct case to specify it.

On a web page localized string values may be capitalized in a different manner.

To determine the localized string whose value you wish to change, look for the UI element with the browser’s Developer Tools, as illustrated in the following picture:

The ‘FIELD LIST’ string in the screenshot above is the ReportStringId.UD_Title_FieldList field value.

Use UI Localization Client

The UI Localization Client is a cross-platform utility that allows you to quickly identify non-translated strings of DevExpress UI controls and translate them during a debug session. The utility automatically generates a RESX file(s) with translated resources and adds it to the project. Note that the UI Localization Client loads all Web Reporting resource strings once the controls are rendered, without reflecting your interaction with the UI.

For more information refer to the following topic: UI Localization Client.

The resource strings for the Web Reporting Controls (Web Document Viewer and Web Report Designer) are located in the following localization containers in the UI Localization Client window:

DevExpress.XtraReports.Web.Localization.LocalizationContainer

Contains localization strings specific only to the Web Reporting Controls.

DevExpress.Utils.Localization.CoreLibraryResources

Contains cross-platform localization strings used in the Web Reporting Controls.

DevExpress.Web.Resources.Localization.LocalizationContainer

Contains localization strings common to DevExpress Web Components used in the Web Reporting Controls.

Troubleshooting

If you followed the instructions in the UI Localization Client topic and the resource string are still not visible, try clearing browser cache.

Identify Non-Translated Strings

• Use our UI Localization Client tool shipped as part of your DevExpress subscription. This tool streamlines the entire localization process. You can quickly find non-translated strings and translate them during a debug session.
• Handle the XtraLocalizer.QueryLocalizedStringNonTranslated event to collect non-localized resource strings for further translation. The event allows you to focus on strings that require translation in your application.

Localize Reports

The Report Designer enables you to localize a report for different target languages and cultures and store localized values in the REPX file.

Run Demo: Localization Feature Tour

Use Properties Panel

Perform the following actions to localize a report:

1. Specify a report language other than the Default:

   

   The Language drop-down list contains all available .NET locales. The report’s languages are highlighted in bold.

2. Change the controls’ property values. You can move and resize a control.

   

   Important

   When the report’s language is set to any language other than the Default language (localization mode), the Properties window shows only localizable properties. The localization mode does not allow you to add a new control from the Toolbar or use the Report Wizard.

3. Save the report.

When you load a localized report, use the Language drop-down list to enable localization mode and switch to the localized version.

Use Localization Editor

The Localization Editor allows you to change text strings in the report and expedite the translation process.

You can also implement the ITranslationService interface to automatically translate all text strings displayed within the Localization Editor to the selected language.

Note

Review the following article for more information: Localize Reports