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 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.
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
.
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);
}
}
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',
},
}
});
locale
property.<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 isen-US
. If you want to change theen-US
culture to a different culture, you have to change thelocale
accordingly.
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.
<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();
}
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 |
To load translation object in an application, use load
function of the L10n
class.
The following example demonstrates the Pivot Table in Deutsch
culture.
<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();
}
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.
<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();
}