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",
German Localization Members
{
firstDay: 1,
days: {
// full day namesnames: [
"Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
// abbreviated day namesnamesAbbr: [
"So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
// shortest day namesnamesShort:
"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 namesnamesAbbr: [
"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)// nullAM: [
"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 patternd:
"dd.MM.yyyy",
// long date patternD:
"dddd, am dd.MM.yyyy",
// short time patternt:
"hh:mm tt",
// long time patternT:
"hh:mm:ss tt",
// long date, short time patternf:
"dddd, MMMM dd, yyyy h:mm tt",
// long date, long time patternF:
"dddd, MMMM dd, yyyy h:mm:ss tt",
// month/day patternM:
"MMMM dd",
// month/year patternY:
"yyyy MMMM",
// S is a sortable format that does not vary by cultureS:
"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"