All docs
V21.2
21.2
21.1
20.2
20.1
The page you are viewing does not exist in version 20.1. This link will take you to the root page.
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Localize ASP.NET Core Dashboard Control

  • 4 minutes to read

You can localize your applications - update their UI to match certain culture and language settings:

  • Translate UI element captions to a different language: dialog boxes, buttons, menu items, error messages, etc.
  • Format numbers, dates, and currencies according to specific culture settings.

web-dashboard-localization

View Example: Dashboard for ASP.NET Core - Localization

Localize UI

ASP.NET Core 3.1+

For ASP.NET Core 3.1+, localize an ASP.NET Core Dashboard application with satellite resource assemblies.

Add Predefined Satellite Assemblies

We published NuGet packages with predefined satellite resource assemblies for the following cultures:

NuGet Package Culture
DevExpress.AspNetCore.Dashboard.de German
DevExpress.AspNetCore.Dashboard.es Spanish
DevExpress.AspNetCore.Dashboard.ja Japanese
DevExpress.AspNetCore.Dashboard.ru Russian

Follow the steps below to add the resources for a culture from the table above:

  1. In Visual Studio, open NuGet Package Manager for the solution.
  2. In the invoked manager, select the DevExpress package source. Find the DevExpress.AspNetCore.Dashboard.XX NuGet package with the required culture and install it (for example, DevExpress.AspNetCore.Dashboard.es).

Add Satellite Assemblies for Other Cultures

You can add the assemblies for other cultures to your ASP.NET Core application. Follow the steps below to add the resources for the French market (the fr culture):

  1. Go to the DevExpress Localization Service to download satellite assemblies for DevExpress .NET controls that correspond to other cultures. Ensure that the version of the satellite assemblies (for instance, v20.2) matches the version of the DevExpress Dashboard package in the project.

    Modules to translate:

    • Dashboard.Core
    • Dashboard.Web
    • DataAccess
    • Web.Resources
  2. Create a subdirectory in the application’s EXE file directory (usually in the bin\Debug\netcoreappX.X\ subdirectory) with the name that corresponds to the newly generated resource culture (for example, bin\Debug\netcoreappX.X\fr - to translate your application into French).

  3. Unpack the archive with resources generated by the DevExpress Localization Service and copy all the *.v21.2.resources.dll files to the newly created subdirectory.

Configure Localization Middleware

After you add assemblies, configure the localization middleware:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env) {
    // ...
    var supportedCultures = new[] { "en-US", "es", "fr" };
    app.UseRequestLocalization(new RequestLocalizationOptions()
        .SetDefaultCulture(supportedCultures[0])
        .AddSupportedCultures(supportedCultures)
        .AddSupportedUICultures(supportedCultures));

    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseDevExpressControls();

    app.UseRouting();
    app.UseEndpoints(endpoints => {
        EndpointRouteBuilderExtension.MapDashboardRoute(endpoints, "dashboardControl", "DefaultDashboard");
        endpoints.MapRazorPages();
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
    });
}

When you launch the application, you can pass the culture and ui-culture query string parameters to the application’s URL. The following example sets the Spanish culture:

http://localhost:5000/?culture=es&ui-culture=es

You can also specify both the language and region (for example, es-MX for Spanish/Mexico).

ASP.NET Core 2.1

For ASP.NET Core 2.1, use component-specific JSON files that correspond to other cultures. Note that since the Web Dashboard exports data on the server side, add satellite resource assemblies to your project to complete the localization process.

Follow the steps below to load the localized strings for the Spanish market (the es culture):

  1. Unpack a self-extracting archive and extract json resources. Create the wwwroot/localization/es directory, and add the dx-analytics-core.es.json and dx-dashboards.es.json files to it.

  2. Load localization strings for the required culture on the DashboardBuilder.OnInitializing event.

    @inject Microsoft.AspNetCore.Hosting.IHostingEnvironment Hosting
    
    <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
        @(Html.DevExpress().Dashboard("dashboardControl1")
            .Width("100%")
            .Height("100%")
            .OnInitializing("onInitializing")
        )
    </div>
    <script>
        function onInitializing() {
            DevExpress.Analytics.Localization.loadMessages(@Html.Raw(System.IO.File.ReadAllText(System.IO.Path.Combine(Hosting.WebRootPath, "localization/es", "dx-analytics-core.es.json"))))
            DevExpress.Analytics.Localization.loadMessages(@Html.Raw(System.IO.File.ReadAllText(System.IO.Path.Combine(Hosting.WebRootPath, "localization/es", "dx-dashboard.es.json"))))
        }
    </script>
    

    Note

    If the Text Editor functionality is enabled, you also need to localize the Rich Text Editor: Rich Text Editor - Localization.

Localize Dates, Numbers, and Currencies

Intl

The ASP.NET Core Dashboard control uses Intl as a default way to apply culture-specific formatting. Intl is the short name used to refer to a particular ECMAScript Internationalization API object. The Web Dashboard supports this API out of the box. All you need to do is configure the localization middleware.

Globalize

The ASP.NET Core Dashboard control can use Globalize instead of Intl to format dates, numbers, and currencies.

Follow the steps below to use Globalize for culture-specific formatting:

  1. Install the following packages:

    npm install globalize@^1.0.1 devextreme-cldr-data@^1.0.2
    
  2. When you bundle scripts, add the following lines to the bundleconfig.json file:

    [
        {
            "outputFileName": "wwwroot/css/site.min.css",
            "inputFiles": [
                "node_modules/devextreme/dist/css/dx.light.css",
                "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
                "node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
                "node_modules/@devexpress/analytics-core/dist/css/dx-querybuilder.css",
                "node_modules/devexpress-dashboard/dist/css/dx-dashboard.light.min.css"
            ],
            "minify": { "enabled": false, "adjustRelativePaths": false }
        },
        {
            "outputFileName": "wwwroot/js/site.min.js",
            "inputFiles": [
                "node_modules/jquery/dist/jquery.min.js",
                "node_modules/jquery-ui-dist/jquery-ui.min.js",
                "node_modules/knockout/build/output/knockout-latest.js",
                "node_modules/ace-builds/src-min-noconflict/ace.js",
                "node_modules/ace-builds/src-min-noconflict/ext-language_tools.js",
                "node_modules/ace-builds/src-min-noconflict/theme-dreamweaver.js",
                "node_modules/ace-builds/src-min-noconflict/theme-ambiance.js",
                "node_modules/cldrjs/dist/cldr.js",
                "node_modules/cldrjs/dist/cldr/event.js",
                "node_modules/cldrjs/dist/cldr/supplemental.js",
                "node_modules/globalize/dist/globalize.js",
                "node_modules/globalize/dist/globalize/message.js",
                "node_modules/globalize/dist/globalize/number.js",
                "node_modules/globalize/dist/globalize/date.js",
                "node_modules/globalize/dist/globalize/currency.js",
                "node_modules/devextreme-cldr-data/supplemental.js",
                "node_modules/devextreme-cldr-data/es.js",
                "node_modules/devextreme/dist/js/dx.all.js",
                "node_modules/@devexpress/analytics-core/dist/js/dx-analytics-core.min.js",
                "node_modules/@devexpress/analytics-core/dist/js/dx-querybuilder.min.js",
                "node_modules/devexpress-dashboard/dist/js/dx-dashboard.min.js"
            ],
            "minify": {
                "enabled": false
            },
            "sourceMap": false
        }
    ]
    
  3. Handle the OnBeforeRender event and call the Globalize.locale() method to apply culture settings.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <title>Dashboard Web Application</title>
        <link href="css/site.min.css" rel="stylesheet" />
        <script type="text/javascript">
            function onBeforeRender(dashboardControl) {
                Globalize.locale('es');                
        }
        </script>
    </head>
    <body>
        <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
        @(Html.DevExpress().Dashboard("dashboardControl1")
            .Width("100%")
            .Height("100%")
            .OnBeforeRender("onBeforeRender")
        )
        </div>
        <script src="js/site.min.js"></script>
    </body>
    </html>