Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (155).NET Core  (27).NET MAUI  (11)Angular  (51)ASP.NET  (48)ASP.NET Core  (68)ASP.NET MVC  (88)Azure  (29)Blazor  (114)DocIO  (21)Essential JS 2  (73)Essential Studio  (166)File Formats  (22)Flutter  (117)JavaScript  (153)Microsoft  (104)PDF  (59)React  (35)Succinctly series  (124)Syncfusion  (505)TypeScript  (30)Uno Platform  (3)UWP  (4)Vue  (28)Webinar  (27)Windows Forms  (57)WinUI  (33)WPF  (127)Xamarin  (134)XlsIO  (24)Other CategoriesBarcode  (4)BI  (29)Bold BI  (4)Build conference  (6)Business intelligence  (53)Button  (4)C#  (111)Chart  (54)Cloud  (10)Company  (445)Dashboard  (6)Data Science  (3)Data Validation  (5)DataGrid  (51)Development  (273)Doc  (7)DockingManager  (1)eBook  (94)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (21)Extensions  (16)File Manager  (4)Gantt  (9)Gauge  (8)Git  (4)Grid  (27)HTML  (9)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (246)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (26)Performance  (7)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (6)Road Map  (9)Scheduler  (30)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (19)Solution Services  (2)Spreadsheet  (11)SQL  (7)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (71)UI  (149)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (1)Visual Studio  (23)Visual Studio Code  (13)Web  (237)What's new  (159)Windows 8  (19)Windows App  (1)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Build World-Class Blazor WebAssembly Apps with Globalization and Localization

Build World-Class Blazor WebAssembly Apps with Globalization and Localization

The world is full of people in different cultures, speaking different languages. For the sake of the global reach of our web applications, we have to provide the web content in users’ native language. In technical terms, we call it globalization and localization.

Syncfusion Blazor platform includes popular Charts, DataGrid, Scheduler, DiagramWord Processor, and Maps controls, as well as unique file-format libraries for manipulating Excel, Word, PDF, and PowerPoint files. These components completely support globalization and localization features.

In this blog, let’s look at how Syncfusion Blazor components adapt well to the browsers’ language settings in WebAssembly apps.

Browser settings

For this blog, I am going to use the Syncfusion Blazor DataGrid component and the Chrome web browser. To see the globalization and localization features of the Blazor DataGrid component (in the WebAssembly app) in action, you first need to know how to change your browser language settings.

Refer to the Setting language preferences in a browser documentation to learn in detail about browser language settings.

In the following GIF image, you’ll see the procedure to change the browser language from the Google home page.

Setting Languange in Google Homepage

Globalization

Globalization is offering content in different formats and designs for the same language. Let’s take the English language as an example. It is the common language of both the U.S. and the U.K. But the date format in the U.S. is mm/dd/yyyy, and in the U.K. it’s dd/mm/yyyy.

Syncfusion Blazor WebAssembly components react automatically based on the browser’s language settings and no extra work is needed for dates to be correctly formatted.

You can simply render our Syncfusion components by following the documentation and they will adapt automatically to the browser’s language settings:

In the following GIF, I show how the Syncfusion Blazor DataGrid component reacts to changes to the browser language.

Globalization Support in Syncfusion Blazor WebAssembly DataGrid

Localization

Localization is literally translating the content to a specific language. The procedures to add translation files and enable localization in our Syncfusion Blazor WebAssembly components is:

  1. First, provide the language resource files:
    1. Add a Resource folder in your WASM application.
    2. Then, add the default and required language files you need in the folder. For the blog, we are going to add the resource file for the language German. The various culture resource files for our Blazor components are in the blazor-locale GitHub repository.
  2. Now, register the localization service configuration in the ~/Program.cs file.
    builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer));
  3. Then, create the ~/Shared/SyncfusionLocalizer.cs file and implement the ISyncfusionStringLocalizer interface in the SyncfusionLocalizer class.
  4. Finally, run the application and set the browser language as German. Then, the Syncfusion Blazor DataGrid content will be translated based on the browser language settings. Refer to the following GIF image.
    Localization Support in Syncfusion Blazor WebAssembly DataGrid

Note: For more details, refer to the Enable Localization in a Blazor WebAssembly application documentation.

GitHub reference

Also, you can download the complete demo for globalization and localization in Blazor WebAssembly.

Conclusion

Thanks for reading! We saw how to enable globalization and localization support in the Syncfusion Blazor DataGrid in your WebAssembly app. Apply these procedures to other Blazor components, too. You can easily reach a global audience by serving them in their local language and culture. Please leave your feedback in the comments section below!

If you would like to try the Syncfusion components, you can download our free trial. Also, check out our Blazor demos and documentation for detailed explanations and the facts you need to proceed further.

You can also contact us through our support forumDirect-Trac, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top