1. Home
  2. Forum
  3. Blazor
  4. Apply style based on Localization

Apply style based on Localization

Hi,


I checked the link below. In the multilingual project, the default controllers are ltr and some languages ​​are rtl. It is not considered in the following link. How do we apply this? 

On the other hand, if we want to design a project where the user can add language, should a parameter be taken from the user that the entered language is ltr or rtl?


https://blazor.syncfusion.com/documentation/common/localization


Thank you


23 Replies
RS Renjith Singh Rajendran Syncfusion Team February 28, 2022 12:15 PM UTC

Hi Sarah, 
 
Greetings from Syncfusion support. 
 
We could see that you would like to enable RTL in grid. If so, then we suggest you to enable the EnableRtl property of Grid to achieve this requirement. 
 
<SfGrid DataSource="@Orders" AllowSorting="true" EnableRtl="true" AllowPaging="true">
References :  
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith R 


SA Sarah February 28, 2022 05:43 PM UTC

Hi Renjith Singh Rajendran,


Yes, I saw this. I designed a component that changes the language. After the user selects the desired language, I change the Current Culture. Is it possible to rtl or ltr the settings of all syncfusion components in my component? Like the following line does:


 builder.Services.AddSyncfusionBlazor(options => { options.EnableRtl = true; });


Thank you


RS Renjith Singh Rajendran Syncfusion Team March 1, 2022 01:45 PM UTC

Hi Sarah, 
 
Yes you can enable RTL for all the Syncfusion components in your application by following the suggestion from the below documentation, 
 
We have also prepared a sample based on this scenario for your convenience, please download and refer the sample from the link below, 
 
Kindly try the above suggestions from your side and if you are facing any difficulties or if we have misunderstood your requirement kindly share with us a detailed explanation of your requirement along with a simple sample based on your sceanrio for us to proceed further. 
 
Regards, 
Renjith R 
 


SA Sarah March 1, 2022 07:20 PM UTC

Hi  Renjith Singh Rajendran,


Thank you for your answer. I used the following link for multilingual in WASM. In CultureSwitcher.razor component the user can change the language and private void OnSelected (ChangeEventArgs e) is run. How to set all syncfusion components rtl or ltr depending on the selected language?


https://blazor.syncfusion.com/documentation/common/localization


Thank you


RS Renjith Singh Rajendran Syncfusion Team March 2, 2022 02:17 PM UTC

Hi Sarah, 
 
Thanks for sharing the details. We are checking the possibility of achieving this requirement from our side. We will update you further details within two business days. 
 
Until then we appreciate your patience. 
 
Regards, 
Renjith R 


RS Renjith Singh Rajendran Syncfusion Team March 3, 2022 10:26 AM UTC

Hi Sarah, 
 
We have prepared a sample to achieve this requirement. Please download and refer the sample from the link below, 
 
Please refer the codes below, 
 
 
   public static async Task Main(string[] args) 
   { 
            var builder = WebAssemblyHostBuilder.CreateDefault(args); 
            ... 
 
            if(result == "de")  //Based on culture enable/disable RTL 
            { 
                builder.Services.AddSyncfusionBlazor(options => options.EnableRtl = true); 
            } 
            else 
            { 
                builder.Services.AddSyncfusionBlazor(options => options.EnableRtl = false); 
            } 
            #endregion 
 
            await builder.Build().RunAsync(); 
  } 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Renjith R 


SA Sarah March 4, 2022 09:42 PM UTC

Hi  Renjith Singh Rajendran,


it was perfect. The bug was fixed. Is it possible to do the same thing in index.html (wwwroot\index.htmls)? I want something like this:

<html lang = "en">

<html lang = "ar" dir = "rtl">

These are based on current culture.

Of course in index.html we have the following code and maybe it can be used:


 <script>

        window.cultureInfo = {

            get: () => window.localStorage['BlazorCulture'],

            set: (value) => window.localStorage['BlazorCulture'] = value

        };

    </script>


Thank you


RS Renjith Singh Rajendran Syncfusion Team March 7, 2022 11:13 AM UTC

Hi Sarah, 
 
Based on this scenario, we suggest you to dynamically set the lang attribute value for html element as like the code below, 
 
 
<html lang="en-US"> 
<head> 
    ... 
</head> 
 
<body> 
    ... 
    <script> 
        window.cultureInfo = { 
            get: () => window.localStorage['BlazorCulture'], 
            set: (value) => window.localStorage['BlazorCulture'] = value 
        }; 
        if (window.cultureInfo.get() != undefined) { 
            document.documentElement.setAttribute('lang', window.cultureInfo.get()); 
        } 
    </script> 
</body> 
</html> 
 
 
Please try the above suggestion from your side and get back to us if you need further assistance. 
 
Regards, 
Renjith R 


SA Sarah replied to Renjith Singh Rajendran March 7, 2022 05:12 PM UTC

Hi Renjith Singh Rajendran,


it was perfect. 

Thanks for the source code.



RS Renjith Singh Rajendran Syncfusion Team March 8, 2022 05:22 AM UTC

Hi Sarah, 
 
Thanks for your update. Please get back to us if you need further assistance. 
 
Regards, 
Renjith R 


SA Sarah March 26, 2023 10:16 AM UTC

Hi,

I upgraded the .NET version from 6 to 7. I upgraded the syncfusion version to 21.1.35. The following error is seen.



NP Naveen Palanivel Syncfusion Team March 27, 2023 06:32 PM UTC

Hi Sarah,


We would like to inform that in the latest release ,we internally defined the options.IgnoreScriptIsolation = true at our end. so we suggest to overcome the problem to remove options.IgnoreScriptIsolation = true in program.cs


Please let us know if you have any concerns.


Regards,

Naveen Palanivel


SA Sarah replied to Naveen Palanivel March 28, 2023 05:45 AM UTC

Hi Naveen Palanivel,


Thank you for your help. The changes you mentioned have not yet been applied to the site's comments:




BH BharatRam Harikrishnan Syncfusion Team April 4, 2023 01:31 PM UTC

Hi Sarah,


We will update our user guide with the details regarding the removal of the built-in JavaScript isolation feature from the 2023 Vol1 release, and we will let you know once it has been reflected in live on or before April 6, 2023.


Regards, 

Bharat Ram H


BH BharatRam Harikrishnan Syncfusion Team May 3, 2023 02:53 PM UTC

Hi Sarah,


We have updated our user guide with the details regarding the removal of the built-in JavaScript isolation feature from the 2023 Vol1 release, and it has been reflected in live.

Please find the links below,

https://blazor.syncfusion.com/documentation/common/adding-script-references#javascript-isolation

https://blazor.syncfusion.com/documentation/common/localization


Regards,

Bharat Ram H


HM Hashim Mohd replied to Renjith Singh Rajendran May 17, 2023 07:35 AM UTC

hi,


how can i achieve this using blazor server instead of wasm



BH BharatRam Harikrishnan Syncfusion Team May 23, 2023 04:15 AM UTC

Hi Hashim,


To achieve RTL (Right-to-Left) support for all Syncfusion Blazor components based on a specific culture in Blazor Server App, you can inject the SyncfusionBlazorService class and then utilize the EnableRtl(bool enable = true) method within the OnInitialized method of CultureSwitcher.razor as shown below:


CultureSwitcher.razor:

@using System.Globalization

@inject NavigationManager NavigationManager

@inject HttpClient Http

@inject SyncfusionBlazorService SyncfusionService


<p>

    <label>

        Select your locale:

        <select @bind="Culture">

            @foreach (var culture in supportedCultures)

            {

                <option value="@culture">@culture.DisplayName</option>

            }

        </select>

    </label>

</p>

 

@code {

 

    private CultureInfo[] supportedCultures = new[]

    {

        new CultureInfo("en-US"),

        new CultureInfo("ar-AE"),

        new CultureInfo("it-IT")

    };

 

    protected override void OnInitialized()

    {

        Culture = CultureInfo.CurrentCulture;

        EnableRtlBasedOnCulture(Culture.Name);

    }

 

    private CultureInfo Culture

    {

        get => CultureInfo.CurrentCulture;

        set

        {

            if (CultureInfo.CurrentCulture != value)

            {

                var uri = new Uri(NavigationManager.Uri).GetComponents(UriComponents.PathAndQuery, UriFormat.Unescaped);

                var cultureEscaped = Uri.EscapeDataString(value.Name);

                var uriEscaped = Uri.EscapeDataString(uri);

 

                NavigationManager.NavigateTo($"Culture/SetCulture?culture={cultureEscaped}&redirectUri={uriEscaped}", forceLoad: true);

            }

        }

    }

 

    private void EnableRtlBasedOnCulture(string culture)

    {

        if (culture == "it-IT")

        {

            bool isRtl = true;

            SyncfusionService.EnableRtl(isRtl);

        }

        else

        {

            bool isRtl = false;

            SyncfusionService.EnableRtl(isRtl);

        }

    }

}


Please find the sample for reference: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-1760119235


Please let us know if you have any concerns.


Regards,

Bharat Ram H


HM Hashim Mohd May 23, 2023 07:12 AM UTC

hi  Bharat Ram H,


thanks for the solution


BH BharatRam Harikrishnan Syncfusion Team May 23, 2023 09:05 AM UTC

Hi Hashim,

 

You're welcome! Please get back to us if you need any further assistance.

 

Regards, 

Bharat Ram H


SA Sarah replied to BharatRam Harikrishnan November 30, 2023 11:23 AM UTC

Hi, 


I used the following code in the Blazer Server. I have two questions.


https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-1760119235


1- How to save the user's selected language so that next time we can display the site to the user based on the last language the user selected?

2- I used resource files for menu titles. How can I show the related resouce file text to the user based on the language selected by the user?






BH BharatRam Harikrishnan Syncfusion Team December 1, 2023 12:39 PM UTC

Hi Sarah,


Query 1: How to save the user's selected language so that next time we can display the site to the user based on the last language the user selected?


This requirement has already been achieved in the sample you mentioned in your query by setting the current culture in a cookie using the code below, which can be read by the Localization Middleware.


CultureController.cs

using Microsoft.AspNetCore.Localization;

using Microsoft.AspNetCore.Mvc;

 

[Route("[controller]/[action]")]

public class CultureController : Controller

{

    public IActionResult SetCulture(string culture, string redirectUri)

    {

        if (culture != null)

        {

            HttpContext.Response.Cookies.Append(

                CookieRequestCultureProvider.DefaultCookieName,

                CookieRequestCultureProvider.MakeCookieValue(

                    new RequestCulture(culture)));

        }

        return LocalRedirect(redirectUri);

    }

}


Please refer to the following documentation for more details:


Query 2: I used resource files for menu titles. How can I show the related resource file text to the user based on the language selected by the user?


You can display the related resource file text to the user based on the selected language by using "GetText" of "ISyncfusionStringLocalizer" as shown below:


CultureSwitcher.razor

@using System.Globalization

@inject NavigationManager NavigationManager

@inject HttpClient Http

@inject SyncfusionBlazorService SyncfusionService

@inject ISyncfusionStringLocalizer Localizer;

<p>

    <label>

        @Localizer.GetText("Select_Your_Locale"):

        <select @bind="Culture">

            @foreach (var culture in supportedCultures)

            {

                <option value="@culture">@culture.DisplayName</option>

            }

        </select>

    </label>

</p>

 

//…


Please refer to the following sample for reference: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample662510394


Feel free to reach out to us if you have any other concerns.


Regards,

Bharat Ram H


SA Sarah replied to BharatRam Harikrishnan June 4, 2024 03:57 AM UTC

Hi  BharatRam Harikrishnan,


Thank you for your reply. I used your code in Blazer Server and it works correctly. I used the code in blazor web app .net 8 and unfortunately it doesn't work properly. Is it possible to edit your source for blazor web app .net 8?


https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample662510394


SK Subathra Kaliamoorthy Syncfusion Team June 4, 2024 01:38 PM UTC

Hi Sarah,


Upon validating your query, we have developed a Blazor Web App targeting .NET 8.0 and implemented dynamic localization switching code and now the application is now working correctly.


Please check the attached sample and get back to us if you still face any issue.


Regards,

Subathra K


Attachment: BlazorAppLocalization_NET8_13680ab2.zip

Loader.
Up arrow icon