dashboard-403455-web-dashboard-integrate-dashboard-component-dashboard-component-for-blazor-blazor-server-localize-a-blazor-server-application.md
Follow the steps below to localize a Dashboard component into different languages and cultures in a Blazor Server Application.
View Example: Dashboard for Blazor Server - Localization
Localization is a process of translating UI element captions to another language: dialog boxes, buttons, menu items, error messages, and more.
DevExpress components contain predefined satellite resource assemblies for the following localizations:
Follow the steps below to add the localization resources to your application:
You can add the assemblies for other cultures to your Blazor Server application. Follow the steps below to add the resources for the French market (the fr culture):
Go to the DevExpress Localization Service to download satellite assemblies for DevExpress .NET controls that correspond to the French culture. Ensure that the version of the satellite assemblies (for instance, v25.2) matches the version of the DevExpress Dashboard package in the project.
Create a subdirectory in the application’s EXE file directory (usually in the bin\Debug\netX.X\ subdirectory) with the name that corresponds to the newly generated resource culture. In this example, create the bin\Debug\netX.X\fr folder to translate your application into French.
Unpack the archive with resources generated by the DevExpress Localization Service and copy all the *.v25.2.resources.dll files to the newly created subdirectory.
In the Program.cs file, register the DashboardLocalizationProvider as a singleton service:
builder.Services.AddSingleton<IDashboardLocalizationProvider, DashboardLocalizationProvider>();
Blazor Server apps are localized using Localization Middleware. In the Program.cs file, call the UseRequestLocalization method with the following options to configure the Localization Middleware:
AddSupportedUICulturesAdds the set of the supported UI cultures by the application.SetDefaultCultureSets the default culture which is used by the application.
var supportedCultures = new[] { "en-US", "de-DE" };
var supportedUICultures = new[] { "en-US", "de-DE" };
var localizationOptions = new RequestLocalizationOptions()
.AddSupportedCultures(supportedCultures)
.AddSupportedUICultures(supportedUICultures)
.SetDefaultCulture(supportedCultures[0]);
app.UseRequestLocalization(localizationOptions);
You can also localize the specified string at runtime. Handle the DashboardControlOptions.onInitializing event and call the ResourceManager.setLocalizationMessages static method. In the view, pass the string identifier and its values as the method’s parameter:
window.dashboardEvents = {
onInitializing: (args) => {
// Localize the specified string at runtime (the "Export To" button's caption in the dashboard title):
DevExpress.Dashboard.ResourceManager.setLocalizationMessages({ "DashboardStringId.ActionExportTo": "Custom Text for Export Button" });
}
}
See the following topic for more information about how to apply JavaScript customization to a Dashboard component in Blazor: JavaScript Customization of Dashboard Component.
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 Dashboard resource strings at once, without reflecting your interaction with the UI.
To use UI Localization Client in your Blazor Server application, register the DashboardLocalizationProvider as a singleton service in Program.cs:
builder.Services.AddSingleton<IDashboardLocalizationProvider, DashboardLocalizationProvider>();
For more information refer to the following topic: UI Localization Client.
The resource strings for the Web Dashboard Control are located in the following localization containers:
DevExpress.DashboardWeb.Localization.LocalizationContainerContains localization strings specific only to the Web Dashboard Control.DevExpress.Utils.Localization.CoreLibraryResourcesContains cross-platform localization strings used in the Web Dashboard Control.DevExpress.Web.Resources.Localization.LocalizationContainerContains localization strings common to DevExpress Web Components used in the Web Dashboard Control.
Globalization is a process of formatting dates, numbers, and currencies according culture-specific assumptions.
Blazor Server apps are globalized using Localization Middleware. In the Program.cs file, call the UseRequestLocalization method with the following options to configure the Localization Middleware:
AddSupportedCulturesAdds the set of the supported cultures by the application.SetDefaultCultureSets the default culture which is used by the application.
var supportedCultures = new[] { "en-US", "de-DE" };
var supportedUICultures = new[] { "en-US", "de-DE" };
var localizationOptions = new RequestLocalizationOptions()
.AddSupportedCultures(supportedCultures)
.AddSupportedUICultures(supportedUICultures)
.SetDefaultCulture(supportedCultures[0]);
app.UseRequestLocalization(localizationOptions);
You can implement a UI that allows users to change the culture at runtime. The following example shows how to save the current culture in a cookie that can be read by the Dashboard Localization Provider:
More information : Dynamically set the culture by user preference.
You can use Globalize to apply custom formatting for Numbers and Dates. Handle the DashboardControlOptions.onInitializing event and specify the formatting:
window.dashboardEvents = {
onInitializing: (args) => {
// Apply custom formatting for numbers and dates:
var json = { main: {} };
json["main"]["de"] = {
numbers: { "currencyFormats-numberSystem-latn": { standard: "C #,##0.00 ¤" } },
dates: { calendars: { gregorian: { dateTimeFormats: { availableFormats: { yMd: "dd MMM y" } } } } }
};
Globalize.load(json);
}
}
See the following topic for more information about how to apply JavaScript customization to a Dashboard component in Blazor: JavaScript Customization of Dashboard Component.
See Also