Documentation

Grid Localization

jqxGrid

The Grid plugin can localize all the displayed strings by passing a localization object to the 'localizestrings' function.
var localizationobj = {};
localizationobj.pagergotopagestring = "Gehe zu:";
localizationobj.pagershowrowsstring = "Zeige Zeile:";
localizationobj.pagerrangestring = " von ";
localizationobj.pagernextbuttonstring = "voriger";
localizationobj.pagerpreviousbuttonstring = "nächster";
localizationobj.sortascendingstring = "Sortiere aufsteigend";
localizationobj.sortdescendingstring = "Sortiere absteigend";
localizationobj.sortremovestring = "Entferne Sortierung";
// apply localization.
$("#jqxgrid").jqxGrid('localizestrings', localizationobj);

Grid Localization Sample

<!DOCTYPE html>
<html lang="en">
<head>
<title id='Description'>Grid with localization.</title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var data = new Array();
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
var priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
for (var i = 0; i < 100; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
var date = new Date();
date.setDate(Math.floor(Math.random() * 27));
date.setMonth(Math.floor(Math.random() * 12));
row["name"] = firstNames[Math.floor(Math.random() * firstNames.length)] + ' ' + lastNames[Math.floor(Math.random() * lastNames.length)];
row["date"] = date;
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
var source =
{
localdata: data,
datatype: "array"
};
$("#jqxgrid").jqxGrid(
{
width: 670,
source: source,
pageable: true,
autoheight: true,
columns: [
{ text: 'Name', datafield: 'name', width: 130 },
{ text: 'Order Date', datafield: 'date', cellsformat: 'D' },
{ text: 'Product', datafield: 'productname', width: 160 },
{ text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', width: 80, cellsalign: 'right', cellsformat: 'c2' },
]
});
var localizationobj = {};
localizationobj.pagergotopagestring = "Gehe zu:";
localizationobj.pagershowrowsstring = "Zeige Zeile:";
localizationobj.pagerrangestring = " von ";
localizationobj.pagernextbuttonstring = "voriger";
localizationobj.pagerpreviousbuttonstring = "nächster";
localizationobj.sortascendingstring = "Sortiere aufsteigend";
localizationobj.sortdescendingstring = "Sortiere absteigend";
localizationobj.sortremovestring = "Entferne Sortierung";
localizationobj.firstDay = 1;
localizationobj.percentsymbol = "%";
localizationobj.currencysymbol = "€";
localizationobj.currencysymbolposition = "before";
localizationobj.decimalseparator = ".";
localizationobj.thousandsseparator = ",";
var days = {
// full day names
names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
// abbreviated day names
namesAbbr: ["Sonn", "Mon", "Dien", "Mitt", "Donn", "Fre", "Sams"],
// shortest day names
namesShort: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
};
localizationobj.days = days;
var months = {
// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
names: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""],
// abbreviated month names
namesAbbr: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dez", ""]
};
localizationobj.months = months;
// apply localization.
$("#jqxgrid").jqxGrid('localizestrings', localizationobj);
});
</script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body style="overflow: hidden;" class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid"></div>
</div>
</body>
</html>

The result of the above code is:



Default Localization Members

{
// separator of parts of a date (e.g. '/' in 11/05/1955)
'/': "/",
// separator of parts of a time (e.g. ':' in 05:44 PM)
':': ":",
// the first day of the week (0 = Sunday, 1 = Monday, etc)
firstDay: 0,
days: {
// full day names
names: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
// abbreviated day names
namesAbbr: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
// shortest day names
namesShort: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
},
months: {
// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
names: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December", ""],
// abbreviated month names
namesAbbr: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", ""]
},
// AM and PM designators in one of these forms:
// The usual view, and the upper and lower case versions
// [standard,lowercase,uppercase]
// The culture does not use AM or PM (likely all standard date formats use 24 hour time)
// null
AM: ["AM", "am", "AM"],
PM: ["PM", "pm", "PM"],
eras: [
// eras in reverse chronological order.
// name: the name of the era in this culture (e.g. A.D., C.E.)
// start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
// offset: offset in years from gregorian calendar
{"name": "A.D.", "start": null, "offset": 0 }
],
twoDigitYearMax: 2029,
patterns: {
// short date pattern
d: "M/d/yyyy",
// long date pattern
D: "dddd, MMMM dd, yyyy",
// short time pattern
t: "h:mm tt",
// long time pattern
T: "h:mm:ss tt",
// long date, short time pattern
f: "dddd, MMMM dd, yyyy h:mm tt",
// long date, long time pattern
F: "dddd, MMMM dd, yyyy h:mm:ss tt",
// month/day pattern
M: "MMMM dd",
// month/year pattern
Y: "yyyy MMMM",
// S is a sortable format that does not vary by culture
S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss"
},
percentsymbol: "%",
currencysymbol: "$",
currencysymbolposition: "before",
decimalseparator: '.',
thousandsseparator: ',',
pagergotopagestring: "Go to page:",
pagershowrowsstring: "Show rows:",
pagerrangestring: " of ",
pagerpreviousbuttonstring: "previous",
pagernextbuttonstring: "next",
groupsheaderstring: "Drag a column and drop it here to group by that column",
sortascendingstring: "Sort Ascending",
sortdescendingstring: "Sort Descending",
sortremovestring: "Remove Sort",
groupbystring: "Group By this column",
groupremovestring: "Remove from groups",
filterclearstring: "Clear",
filterstring: "Filter",
filtershowrowstring: "Show rows where:",
filtershowrowdatestring: "Show rows where date:",
filterorconditionstring: "Or",
filterandconditionstring: "And",
filterselectallstring: "(Select All)",
filterchoosestring: "Please Choose:",
filterstringcomparisonoperators: ['empty', 'not empty', 'contains', 'contains(match case)',
'does not contain', 'does not contain(match case)', 'starts with', 'starts with(match case)',
'ends with', 'ends with(match case)', 'equal', 'equal(match case)', 'null', 'not null'],
filternumericcomparisonoperators: ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'],
filterdatecomparisonoperators: ['equal', 'not equal', 'less than', 'less than or equal', 'greater than', 'greater than or equal', 'null', 'not null'],
filterbooleancomparisonoperators: ['equal', 'not equal'],
validationstring: "Entered value is not valid",
emptydatastring: "No data to display",
filterselectstring: "Select Filter",
loadtext: "Loading...",
clearstring: "Clear",
todaystring: "Today"
};

German Localization Members

{
firstDay: 1,
days: {
// full day names
names: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
// abbreviated day names
namesAbbr: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
// shortest day names
namesShort: "So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"]
},
months: {
// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
names: ["Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember", ""],
// abbreviated month names
namesAbbr: ["Jan", "Feb", "Mär", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez", ""]
},
// AM and PM designators in one of these forms:
// The usual view, and the upper and lower case versions
// [standard,lowercase,uppercase]
// The culture does not use AM or PM (likely all standard date formats use 24 hour time)
// null
AM: ["Vormittag", "vormittag", "Vormittag"],
PM: ["Nachmittag", "nachmittag", "Nachmittag"],
eras: [
// eras in reverse chronological order.
// name: the name of the era in this culture (e.g. A.D., C.E.)
// start: when the era starts in ticks (gregorian, gmt), null if it is the earliest supported era.
// offset: offset in years from gregorian calendar
{"name": "n. Chr.", "start": null, "offset": 0 }
],
twoDigitYearMax: 2100,
patterns: {
// short date pattern
d: "dd.MM.yyyy",
// long date pattern
D: "dddd, am dd.MM.yyyy",
// short time pattern
t: "hh:mm tt",
// long time pattern
T: "hh:mm:ss tt",
// long date, short time pattern
f: "dddd, MMMM dd, yyyy h:mm tt",
// long date, long time pattern
F: "dddd, MMMM dd, yyyy h:mm:ss tt",
// month/day pattern
M: "MMMM dd",
// month/year pattern
Y: "yyyy MMMM",
// S is a sortable format that does not vary by culture
S: "yyyy\u0027-\u0027MM\u0027-\u0027dd\u0027T\u0027HH\u0027:\u0027mm\u0027:\u0027ss"
},
percentsymbol: "%",
currencysymbol: "€",
currencysymbolposition: "after",
decimalseparator: ',',
thousandsseparator: '.',
pagergotopagestring: "Gehe zu:",
pagershowrowsstring: "Zeige Zeile:",
pagerrangestring: " von ",
pagerpreviousbuttonstring: "voriger",
pagernextbuttonstring: "nächster",
groupsheaderstring: "Ziehen Sie eine Spalte hierher um eine Gruppe zu erstellen",
sortascendingstring: "Sortiere aufsteigend",
sortdescendingstring: "Sortiere absteigend",
sortremovestring: "Entferne Sortierung",
groupbystring: "Gruppiere nach dieser Spalte",
groupremovestring: "Entferne Gruppierung",
filterclearstring: "Aufheben",
filterstring: "Filter",
filtershowrowstring: "Zeige Zeilen wo:",
filterorconditionstring: "Oder",
filterandconditionstring: "Und",
filterstringcomparisonoperators: ['leer', 'nicht leer', 'enthält', 'enthält(Klein-/Großschreibung beachten)',
'enthält nicht', 'enthält nicht(Klein-/Großschreibung beachten)', 'startet mit', 'startet mit(Klein-/Großschreibung beachten)',
'endet mit', 'endet mit(Klein-/Großschreibung beachten)', 'gleich', 'gleich(Klein-/Großschreibung beachten)', 'undefiniert', 'nicht undefiniert'],
filternumericcomparisonoperators: ['gleich', 'ungleich', 'kleiner als', 'kleiner gleich', 'größer als', 'größer gleich', 'undefiniert', 'nicht undefiniert'],
filterdatecomparisonoperators: ['gleich', 'ungleich', 'früher als', 'früher gleich', 'später als', 'später gleich', 'undefiniert', 'nicht undefiniert']
validationstring: "Der eingegebene Wert ist nicht gültig"
};