Globalization in ASP.NET Core Pivot Table control

03 Mar 2021 / 6 minutes to read

Globalization is the combination of internalization and localization. You can adapt the component to various languages by parsing and formatting the date or number (Internationalization) & adding culture specific customization and translation to the text (Localization).

Internationalization

Internationalization library provides support for formatting and parsing the number, date, and time by using the official Unicode CLDR JSON data and also provides the loadCldr method to load the culture specific CLDR JSON data.

By default, all the Essential JS 2 component 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 \scripts\cldr-data.

Now use the loadCultureFiles method to load the culture specific CLDR JSON data.

In ASP.NET MVC refer the culture files directly from \scripts\cldr-data location. In ASP.NET Core refer the culture files directly from \wwwroot\scripts\cldr-data location as like the below code examples for both ASP.NET Core and MVC

function loadCultureFiles(de) {
    var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];
    var loader = ej.base.loadCldr;
    var loadCulture = function (prop) {
        var val, ajax;
        <!--For ASP.NET MVC -->
        ajax = new ej.base.Ajax(location.origin + '/../scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
        <!--For ASP.NET Core-->
        ajax = new ej.base.Ajax(location.origin + '/../wwwroot/scripts/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);
    }
}

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

  var L10n = ej.base.L10n;
   L10n.load({
        "de": {
            'pivotview': {
                'grandTotal': 'Gesamtsumme',
                'total': 'Insgesamt',
                'value': 'Wert',
                'noValue': 'Kein Wert',
                'row': 'Zeile',
                'column': 'Spalte',
                'collapse': 'Zusammenbruch',
                'expand': 'Erweitern',
            },
        }
    });

Set the culture by using the locale property.

tagHelper

Internationalization.cs

<ejs-pivotview id="PivotView" height="300" showFieldList="true">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
</ejs-pivotview>

<script>
    var pivotObj;
    var L10n = ej.base.L10n;
    L10n.load({
        "fr-CH": {
            "pivotview": {
                "grandTotal": "Grand Total",
                "total": "Total",
                "value": "Valeur",
                "noValue": "Pas de valeur",
                "row": "Rangée",
                "column": "La colonne",
                "collapse": "Effondrement",
                "expand": "L'expansion"
            },
            "pivotfieldlist": {
                "fieldList": "Field List",
                "dropRowPrompt": "Drop row ici",
                "dropColPrompt": "Drop column here",
                "dropValPrompt": "Valeur liste déroulante ici",
                "dropFilterPrompt": "Filtre goutte ici",
                "addPrompt": "Ajouter un champ ici",
                "centerHeader": "Faire glisser les champs entre les zones ci-dessous :",
                "add": "Ajouter",
                "drag": "Faites glisser",
                "filter": "Filter",
                "filtered": "Filtered",
                "sort": "Trier",
                "remove": "Déposer",
                "filters": "Filters",
                "rows": "Lignes",
                "columns": "Colonnes",
                "values": "Valeurs",
                "error": "Error",
                "dropAction": "Champ calculé ne peut pas être place dans toute autre région, à l'exception de l'axe des valeurs.",
                "search": "Recherchez",
                "close": "Fermer",
                "cancel": "Annuler",
                "delete": "Supprimer",
                "alert": "Alert",
                "warning": "Attention",
                "ok": "OK",
                "allFields": "Tous les domaines",
                "noMatches": "Pas de correspondance"
            }
        }
    });
    document.addEventListener('DOMContentLoaded', function () {
        pivotObj = document.getElementById('PivotView').ej2_instances[0];
        loadCultureFiles('fr-CH');
        pivotObj.locale = 'fr-CH';
    });

    function loadCultureFiles(name) {
        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];
        if (name === 'ar') {
            files.push('numberingSystems.json');
        }
        var loader = ej.base.loadCldr;
        var loadCulture = function (prop) {
            var val, ajax;
            if (name === 'ar' && prop === files.length - 1) {
                ajax = new ej.base.Ajax(location.origin + '/../../scripts/cldr-data/supplemental/' + files[prop], 'GET', false);
            } else {
                ajax = new ej.base.Ajax(location.origin + '/../../scripts/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);
        }
    }
</script>

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

By default, locale value is en-US. If you want to change the en-US culture to a different culture, you have to change the locale accordingly.

Decimal separators

The decimal separators of pivot table values varies based on the culture applied to the component. The culture can be set by calling the method setCulture with appropriate culture string as its parameter.

The following example demonstrates the decimal separators in Deutsch culture.

tagHelper

Locale.cs

<ejs-pivotview id="PivotView" height="300" showFieldList="true" locale="de-DE">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C2" currency="EUR"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
</ejs-pivotview>

<script>
     var pivotObj;
    var L10n = ej.base.L10n;
    L10n.load({
    'de-DE': {
        'pivotview': {
            'grandTotal': 'Gesamtsumme',
            'total': 'Insgesamt',
            'value': 'Wert',
            'noValue': 'Kein Wert',
            'row': 'Zeile',
            'column': 'Spalte',
            'collapse': 'Zusammenbruch',
            'expand': 'Erweitern'
        },
        "pivotfieldlist": {
            'fieldList': 'Feld Liste',
            'dropRowPrompt': 'Drop Reihe hier',
            'dropColPrompt': 'Drop column Hier',
            'dropValPrompt': 'Drop wert hier',
            'dropFilterPrompt': 'Drop Filter Hier',
            'addPrompt': 'Feld hinzufügen',
            'centerHeader': 'Ziehen Sie die Felder zwischen den Bereichen unten:',
            'add': 'Hinzufügen',
            'drag': 'Ziehen',
            'filters': 'Filter',
            'rows': 'Zeilen',
            'columns': 'Spalten',
            'values': 'Werte',
            'error': 'Fehler',
            'dropAction': 'Berechnetes Feld nicht in jeder anderen Region außer Wert Achse sein.',
            'search': 'Suche',
            'close': 'Schließen',
            'cancel': 'Abbrechen',
            'delete': 'Löschen',
            'alert': 'Warnung',
            'warning': 'Warnung',
            'ok': 'OK',
            'allFields': 'Alle Felder',
            'noMatches': 'Keine Treffer'
            }
        }
   });

    document.addEventListener('DOMContentLoaded', function () {
        pivotObj = document.getElementById('PivotView').ej2_instances[0];
        loadCultureFiles('de-DE');
    });

    function loadCultureFiles(name) {
        var files = ['ca-gregorian.json', 'numbers.json', 'timeZoneNames.json'];
        if (name === 'ar') {
            files.push('numberingSystems.json');
        }
        var loader = ej.base.loadCldr;
        var loadCulture = function (prop) {
            var val, ajax;
            if (name === 'ar' && prop === files.length - 1) {
                ajax = new ej.base.Ajax(location.origin + '/../../scripts/cldr-data/supplemental/' + files[prop], 'GET', false);
            } else {
                ajax = new ej.base.Ajax(location.origin + '/../../scripts/cldr-data/main/' + name + '/' + files[prop], 'GET', false);
            }
            ajax.onSuccess = function (value) {
                val = value;
            };
            ajax.send();
            loader(JSON.parse(val));
            ej.base.setCulture('de');
            ej.base.setCurrencyCode('EUR');
        };
        for (var prop = 0; prop < files.length; prop++) {
            loadCulture(prop);
        }
    }
</script>

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

output

Localization

The Localization library allows you to localize default text content of the Pivot Table. The pivot table component has static text on some features (like drop area text, pivot field list title, etc…) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object.

The following list of properties and its values are used in the pivot table.

Locale keywords	Text
grandTotal	Grand Total
total	Total
value	Value
noValue	No value
row	Row
column	Column
collapse	Collapse
expand	Expand
rowAxisPrompt	Drop row here
columnAxisPrompt	Drop column here
valueAxisPrompt	Drop value here
filterAxisPrompt	Drop filter here
filter	Filter
filtered	Filtered
sort	Sort
filters	Filters
rows	Rows
columns	Columns
values	Values
close	Close
cancel	Cancel
delete	Delete
calculatedField	Calculated Field
createCalculatedField	Create Calculated Field
fieldName	Enter the field name
error	Error
invalidFormula	Invalid formula.
dropText	Example: (“Sum(OrderCount)” + “Sum(InStock)”) * 250
dropTextMobile	Add fields and edit formula here.
dropAction	Calculated field cannot be place in any other region except value axis.
alert	Alert
warning	Warning
ok	OK
search	Search
drag	Drag
remove	Remove
sum	Sum
average	Average
count	Count
min	Min
max	Max
allFields	All Fields
formula	Formula
addToRow	Add to Row
addToColumn	Add to Column
addToValue	Add to Value
addToFilter	Add to Filter
emptyData	No records to display
fieldExist	A field already exists in this name. Please enter a different name.
confirmText	A calculation field already exists in this name. Do you want to replace it?
noMatches	No matches
format	Summaries values by
edit	Edit
clear	Clear
formulaField	Drag and drop fields to formula
dragField	Drag field to formula

The following list of properties and its values are used in the pivot field list.

Locale keywords	Text
staticFieldList	Pivot Field List
fieldList	Field List
dropFilterPrompt	Drop filter here
dropColPrompt	Drop column here
dropRowPrompt	Drop row here
dropValPrompt	Drop value here
addPrompt	Add field here
adaptiveFieldHeader	Choose field
centerHeader	Drag fields between axes below:
add	add
drag	Drag
filter	Filter
filtered	Filtered
sort	Sort
remove	Remove
filters	Filters
rows	Rows
columns	Columns
values	Values
calculatedField	Calculated Field
createCalculatedField	Create Calculated Field
fieldName	Enter the field name
error	Error
invalidFormula	Invalid formula.
dropText	Example: (“Sum(OrderCount)” + “Sum(InStock)”) * 250
dropTextMobile	Add fields and edit formula here.
dropAction	Calculated field cannot be place in any other region except value axis.
search	Search
close	Close
cancel	Cancel
delete	Delete
alert	Alert
warning	Warning
ok	OK
sum	Sum
average	Average
count	Count
min	Min
max	Max
allFields	All Fields
formula	Formula
fieldExist	A field already exists in this name. Please enter a different name.
confirmText	A calculation field already exists in this name. Do you want to replace it?
noMatches	No matches
format	Summaries values by
edit	Edit
clear	Clear
formulaField	Drag and drop fields to formula
dragField	Drag field to formula

Loading Translations

To load translation object in an application, use load function of the L10n class.

The following example demonstrates the Pivot Table in Deutsch culture.

tagHelper

Localization.cs

<ejs-pivotview id="PivotView" height="300" showFieldList="true" locale="fr-CH">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
</ejs-pivotview>

<script>
    var L10n = ej.base.L10n;
    L10n.load({
        "fr-CH": {
            "pivotview": {
                "grandTotal": "Grand Total",
                "total": "Total",
                "value": "Valeur",
                "noValue": "Pas de valeur",
                "row": "Rangée",
                "column": "La colonne",
                "collapse": "Effondrement",
                "expand": "L'expansion"
            },
            "pivotfieldlist": {
                "fieldList": "Field List",
                "dropRowPrompt": "Drop row ici",
                "dropColPrompt": "Drop column here",
                "dropValPrompt": "Valeur liste déroulante ici",
                "dropFilterPrompt": "Filtre goutte ici",
                "addPrompt": "Ajouter un champ ici",
                "centerHeader": "Faire glisser les champs entre les zones ci-dessous :",
                "add": "Ajouter",
                "drag": "Faites glisser",
                "filter": "Filter",
                "filtered": "Filtered",
                "sort": "Trier",
                "remove": "Déposer",
                "filters": "Filters",
                "rows": "Lignes",
                "columns": "Colonnes",
                "values": "Valeurs",
                "error": "Error",
                "dropAction": "Champ calculé ne peut pas être place dans toute autre région, à l'exception de l'axe des valeurs.",
                "search": "Recherchez",
                "close": "Fermer",
                "cancel": "Annuler",
                "delete": "Supprimer",
                "alert": "Alert",
                "warning": "Attention",
                "ok": "OK",
                "allFields": "Tous les domaines",
                "noMatches": "Pas de correspondance"
            }
        }
    });
</script>

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

Right-to-left (RTL)

RTL provides an option to switch the text direction and layout of the Pivot Table component 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 Pivot Table, set the enableRtl property to true.

tagHelper

RTL.cs

<ejs-pivotview id="PivotView" height="300" showFieldList="true" locale="ar" enableRtl="true">
    <e-datasourcesettings dataSource="@ViewBag.DataSource" expandAll="false">
        <e-formatsettings>
            <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
        </e-formatsettings>
        <e-rows>
            <e-field name="Country"></e-field>
            <e-field name="Products"></e-field>
        </e-rows>
        <e-columns>
            <e-field name="Year" caption="Year"></e-field>
            <e-field name="Quarter"></e-field>
        </e-columns>
        <e-values>
            <e-field name="Sold" caption="Units Sold"></e-field>
            <e-field name="Amount" caption="Sold Amount"></e-field>
        </e-values>
    </e-datasourcesettings>
</ejs-pivotview>

<script>
    var L10n = ej.base.L10n;
    L10n.load({
        "ar": {
            "pivotview": {
                "grandTotal": "المجموع الكلى",
                "total": "المجموع",
                "value": "القيمة",
                "noValue": "لا قيمة لها",
                "row": "صف",
                "column": "العمود",
                "collapse": "الانهيار",
                "expand": "توسيع"
            },
            "pivotfieldlist": {
                "fieldList": "قائمة الحقول",
                "dropRowPrompt": "تراجع الخلاف هنا",
                "dropColPrompt": "انخفاض العمود هنا",
                "dropValPrompt": "انخفاض قيمة هنا",
                "dropFilterPrompt": "انخفاض هنا عامل التصفية",
                "addPrompt": "اضافة حقل هنا",
                "centerHeader": "اسحب المجالات بين المناطق الموضحة ادناه:",
                "add": "اضافة",
                "drag": "اسحب",
                "filter": "الفلتر",
                "filtered": "تصفية",
                "sort": "النوع",
                "remove": "قم بازالة",
                "filters": "عوامل التصفية",
                "rows": "الصفوف",
                "columns": "الاعمدة",
                "values": "قيم",
                "error": "خطا",
                "search": "البحث",
                "close": "قريب",
                "cancel": "الغاء",
                "delete": "احذف",
                "alert": "حالة تاهب قصوى",
                "warning": "تحذير",
                "ok": "موافق",
                "allFields": "جميع الحقول",
                "noMatches": "لا مباريات"
            }
        }
    });
</script>

public ActionResult Index()
{
    var data = GetPivotData();
    ViewBag.DataSource = data;
    return View();
}

Contents

Internationalization
Decimal separators
Localization
Loading Translations
Right-to-left RTL

Contents

Internationalization
Decimal separators
Localization
Loading Translations
Right-to-left RTL

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!