Search results

Globalization

Internationalization

Internationalization library provides support for formatting and parsing the number by using the official Unicode CLDR JSON data and also provides the loadCldr method to load the culture specific CLDR JSON data. The NumericTextBox comes with built-in internationalization support to adapt based on culture.

  • Set the culture by using the SetCulture property.

To go with the different culture other than English, follow the below steps:

Load CLDR-Data to the application

  • Open Command Prompt in your machine.

  • Run the following command in Command Prompt.

cd /d 'Folder path of your Blazor application'

For example : cd /d  E:\Blazor\WebApplication
  • Make sure that you have installed Node and NPM in your machine before installing the CLDR-Data.

  • To check if you have Node, run this command in your Command Prompt.

node -v
  • If Node is not installed, then you can download and install the Node from this location.

  • To confirm if you have NPM, run this command in your Command Prompt.

npm -v
  • Install the CLDR-Data package by using the following command (it installs the CLDR JSON data). To learn more about CLDR-Data, refer to CLDR-Data.
npm install cldr-data --save
  • After installing the package, you can find the culture specific JSON data under the location \node_modules\cldr-data. Then, copy the cldr-data folder into wwwroot folder.

  • Download the required locale packages to render the Blazor Calendar component with specified locale.

  • To download the locale definition of Blazor components, use this link.

  • After downloading the ej2-locale package, copy the ej2-locale folder with required local definition file into wwwroot folder.

  • By default, the ej2-locale package contains the localized text for static text present in components like incrementTitle, decrementTitle, and more.

@using Syncfusion.EJ2.Blazor.Inputs

<EjsNumericTextBox TValue="int?" Value=10></EjsNumericTextBox>

@code {
    [Inject]
    protected IJSRuntime JsRuntime { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        this.JsRuntime.Ejs().LoadLocaleData("wwwroot/ej2-locale/src/de.json").SetCulture("de").LoadCldrData(new string[] { "wwwroot/cldr-data/main/de/currencies.json", "wwwroot/cldr-data/main/de/numbers.json" });
    }
}

The output will be as follows.

NumericTextBox Sample

Customize the localized text

  • You can change the localized text of particular component by editing the wwwroot/ej2-locale/src/{{locale name}}.json file.

  • In the following code, modified the localized text of increment title and decrement title in de culture.

[wwwroot/ej2-locale/src/de.json]

{
  "de": {
    "numerictextbox": {
      "incrementTitle": "Wert erhöhen",
      "decrementTitle": "Dekrementwert"
    }
  }
}

The output will be as follows.

NumericTextBox Sample

Right to Left

RTL provides an option to switch the text direction and layout of the NumericTextBox component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Urdu, etc.). To enable RTL NumericTextBox, set the EnableRtl to true.

The following code example initializes the NumericTextBox component in Chinese culture.

@using Syncfusion.EJ2.Blazor.Inputs

<EjsNumericTextBox TValue="int?" Value=10 EnableRtl=true></EjsNumericTextBox>

@code {
    [Inject]
    protected IJSRuntime JsRuntime { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        this.JsRuntime.Ejs().LoadLocaleData("wwwroot/ej2-locale/src/zh.json").SetCulture("zh").LoadCldrData(new string[] { "wwwroot/cldr-data/main/de/currencies.json", "wwwroot/cldr-data/main/de/numbers.json" });
    }
}

The output will be as follows.

Numerictextbox