Globalization

10 Oct 202224 minutes to read

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. For more information about internationalization, refer to this link.

By default, all the Essential JS 2 control are specific to English culture (en-US).
If you want to go with the different culture other than English, follow the below steps.

• Install the CLDR-Data package by using the below command (it installs the CLDR JSON data). For more information about CLDR-Data, refer to this link.

npm install cldr-data --save

Once the package installed, you can find the culture specific JSON data under the location /node_modules/cldr-data.

In ASP.NET MVC refer the culture files directly from /node_modules/cldr-data location as like the below code examples

function loadCultureFiles(name) {
        var files = ['currencies.json', 'numbers.json'];
        if (name === 'zh') {
            files.push('currencyData.json');
        }
        var loader = ej.base.loadCldr;
        var loadCulture = function () {
            var val, ajax;
            if (name === 'zh' && prop === files.length - 1) {
                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../node_modules/cldr-data/supplemental/' + files[prop], 'GET', false);
            } else {
                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../node_modules/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
            }
            ajax.onSuccess = function (value) {
                val = value;
            };
            ajax.send();
            loader (JSON.parse(val));
        };
        for (var prop = 0; prop < files.length; prop++) {
            loadCulture();
        }
    }
loadCultureFiles('de');

Localization

Localization library allows users to localize the default text contents of the NumericTextBox to different cultures using the locale property.
In NumericTextBox, spin buttons title for the tooltip will be localized based on the culture.

Locale key	en-US (default)
incrementTitle	Increment value
decrementTitle	Decrement value

• Before changing to a culture other than English, ensure that locale text for the concerned culture is loaded through load method of L10n class.

ej.base.L10n.load({
        'en': {
            'numerictextbox': { incrementTitle: 'Increment value', decrementTitle: 'Decrement value' }
        },
        'de': {
            'numerictextbox': { incrementTitle: 'Wert erhöhen', decrementTitle: 'Dekrementwert' }
        },
        'zh': {
            'numerictextbox': { incrementTitle: '增值', decrementTitle: '遞減值' }
        }
    });

CSHTML

<div class="content-wrapper">
    <div class="divelement">
        @Html.EJS().NumericTextBox("numeric").Value(10).Locale("de").Placeholder("Geben Sie den Wert ein").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()
    </div>
    <div class="divelement">
        @Html.EJS().NumericTextBox("percentage").Format("p2").Value(0.5).Locale("de").Max(1).Min(0).Step(0.01).Placeholder("Geben Sie den Prozentsatz ein").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()
    </div>
    <div class="divelement">
        @Html.EJS().NumericTextBox("currency").Format("c2").Value(100).Locale("de").Currency("EUR").Placeholder("Geben Sie die Währung ein").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()
    </div>
    <div class="wrapper">
        @Html.EJS().DropDownList("cultures").Text("de").Change("changeLocale").Placeholder("Choose Culture").FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).DataSource(ViewBag.cultureData).Fields(new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "CultureName" }).Render()
    </div>
</div>
<script>
    function loadCultureFiles(name) {
        var files = ['currencies.json', 'numbers.json'];
        if (name === 'zh') {
            files.push('currencyData.json');
        }
        var loader = ej.base.loadCldr;
        var loadCulture = function (prop) {
            var val, ajax;
            if (name === 'zh' && prop === files.length - 1) {
                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../node_modules/cldr-data/supplemental/' + files[prop], 'GET', false);
            } else {
                ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../node_modules/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
            }
            ajax.onSuccess = function (value) {
                val = value;
            };
            ajax.send();
            loader(JSON.parse(val));
        };
        for (var prop = 0; prop < files.length; prop++) {
            loadCulture(prop);
        }
    }
    loadCultureFiles('de');
    function changeLocale() {
        var numeric = document.getElementById("numeric").ej2_instances[0];
        var percent = document.getElementById("percentage").ej2_instances[0];
        var currency = document.getElementById("currency").ej2_instances[0];

        var culture = document.getElementById('cultures').value;
        numeric.locale = culture;
        percent.locale = culture;
        currency.locale = culture;

        if (culture != 'en') {
            loadCultureFiles(culture);
        }
        if (culture === 'zh') {
            currency.currency = 'CNY';
            numeric.placeholder = '输入值';
            currency.placeholder = '输入货币';
            percent.placeholder = '输入百分比';

        }
        else if (culture === 'de') {
            currency.currency = 'EUR';
            numeric.placeholder = 'Geben Sie den Wert ein';
            currency.placeholder = 'Geben Sie die Währung ein';
            percent.placeholder = 'Geben Sie den Prozentsatz ein';

        }
        else {
            currency.currency = 'USD';
            numeric.placeholder = 'Enter the value';
            currency.placeholder = 'Enter the currency';
            percent.placeholder = 'Enter the percentage';
        }
    }
</script>
<style>
    .content-wrapper {
        width: 25%;
        margin: 0 auto;
    }

    .divelement {
        padding: 10px;
    }

    .wrapper {
        width: 50%;
        padding-top: 50px;
        margin: 0 auto;
    }
</style>
<script>
    ej.base.enableRipple(true)
    ej.base.L10n.load({
        'en': {
            'numerictextbox': { incrementTitle: 'Increment value', decrementTitle: 'Decrement value' }
        },
        'de': {
            'numerictextbox': { incrementTitle: 'Wert erhöhen', decrementTitle: 'Dekrementwert' }
        },
        'zh': {
            'numerictextbox': { incrementTitle: '增值', decrementTitle: '遞減值' }
        },
    });
</script>

Localization.cs

public class HomeController : Controller
{
   public class Cultures
    {
        public string CultureName { get; set; }
    }
    public IActionResult Index()
        {
            List<Cultures> cultureData = new List<Cultures>();
            cultureData.Add(new Cultures() { CultureName = "de" });
            cultureData.Add(new Cultures() { CultureName = "zh" });
            cultureData.Add(new Cultures() { CultureName = "en" });
            ViewBag.cultureData = cultureData;
             return View();
        }

}

Output be like the below.

Right to Left

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

CSHTML

<div class="content-wrapper">
    <div class="divelement">
        @Html.EJS().NumericTextBox("numeric").Value(10).Locale("de").Placeholder("Geben Sie den Wert ein").EnableRtl(true).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()
    </div>
    <div class="divelement">
        @Html.EJS().NumericTextBox("percentage").Format("p2").Value(0.5).Locale("de").Max(1).Min(0).Step(0.01).Placeholder("Geben Sie den Prozentsatz ein").EnableRtl(true).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()
        </div>
    <div class="divelement">
        @Html.EJS().NumericTextBox("currency").Format("c2").Value(100).Locale("de").Currency("EUR").Placeholder("Geben Sie die Währung ein").EnableRtl(true).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).Render()
        </div>
    <div class="wrapper">
        @Html.EJS().DropDownList("cultures").Text("de").Change("changeLocale").Placeholder("Choose Culture").EnableRtl(true).FloatLabelType(Syncfusion.EJ2.Inputs.FloatLabelType.Always).DataSource(ViewBag.cultureData).Fields( new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings { Text = "CultureName" }).Render()
        </div>
    </div>
    <script>
        function loadCultureFiles(name) {
            var files = ['currencies.json', 'numbers.json'];
            if (name === 'zh') {
                files.push('currencyData.json');
            }
            var loader = ej.base.loadCldr;
            var loadCulture = function (prop) {
                var val, ajax;
                if (name === 'zh' && prop === files.length - 1) {
                    ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../node_modules/cldr-data/supplemental/' + files[prop], 'GET', false);
                } else {
                    ajax = new ej.base.Ajax(location.origin + location.pathname + '/../../node_modules/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
                }
                ajax.onSuccess = function (value) {
                    val = value;
                };
                ajax.send();
                loader(JSON.parse(val));
            };
            for (var prop = 0; prop < files.length; prop++) {
                loadCulture(prop);
            }
        }
        loadCultureFiles('de');
        function changeLocale() {
            var numeric = document.getElementById("numeric").ej2_instances[0];
            var percent = document.getElementById("percentage").ej2_instances[0];
            var currency = document.getElementById("currency").ej2_instances[0];

            var culture = document.getElementById('cultures').value;
            numeric.locale = culture;
            percent.locale = culture;
            currency.locale = culture;

            if (culture != 'en') {
                loadCultureFiles(culture);
            }
            if (culture === 'zh') {
                currency.currency = 'CNY';
                numeric.placeholder = '输入值';
                currency.placeholder = '输入货币';
                percent.placeholder = '输入百分比';

            }
            else if (culture === 'de') {
                currency.currency = 'EUR';
                numeric.placeholder = 'Geben Sie den Wert ein';
                currency.placeholder = 'Geben Sie die Währung ein';
                percent.placeholder = 'Geben Sie den Prozentsatz ein';

            }
            else {
                currency.currency = 'USD';
                numeric.placeholder = 'Enter the value';
                currency.placeholder = 'Enter the currency';
                percent.placeholder = 'Enter the percentage';
            }
        }
    </script>
    <style>
        .content-wrapper {
            width: 25%;
            margin: 0 auto;
        }
        .divelement {
            padding:10px;
        }
        .wrapper {
            width: 50%;
            padding-top: 50px;
            margin: 0 auto;
        }
    </style>
    <script>
        ej.base.enableRipple(true)
        ej.base.L10n.load({
            'en': {
                'numerictextbox': { incrementTitle: 'Increment value', decrementTitle: 'Decrement value' }
            },
            'de': {
                'numerictextbox': { incrementTitle: 'Wert erhöhen', decrementTitle: 'Dekrementwert' }
            },
            'zh': {
                'numerictextbox': { incrementTitle: '增值', decrementTitle: '遞減值' }
            },
        });
    </script>

Rtl.cs

public class HomeController : Controller
    {
     public class Cultures
        {
            public string CultureName { get; set; }

        }
   public ActionResult Index()
        {
           
            List<Cultures> cultureData = new List<Cultures>();
            cultureData.Add(new Cultures() { CultureName = "de" });
            cultureData.Add(new Cultures() { CultureName = "zh" });
            cultureData.Add(new Cultures() { CultureName = "en" });
            ViewBag.cultureData = cultureData;
            return View ();
        }
...
}

Output be like the below.