TreeGrid Localization
The TreeGrid plugin can localize all the displayed strings by setting the
localization property.
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",
// formatting of dates in MySQL DataBases
ISO: "yyyy-MM-dd hh:mm:ss",
ISO2: "yyyy-MM-dd HH:mm:ss",
d1: "dd.MM.yyyy",
d2: "dd-MM-yyyy",
d3: "dd-MMMM-yyyy",
d4: "dd-MM-yy",
d5: "H:mm",
d6: "HH:mm",
d7: "HH:mm tt",
d8: "dd/MMMM/yyyy",
d9: "MMMM-dd",
d10: "MM-dd",
d11: "MM-dd-yyyy"
},
percentsymbol: "%",
currencysymbol: "$",
currencysymbolposition: "before",
decimalseparator: '.',
thousandsseparator: ',',
pagergotopagestring: "Go to page:",
pagershowrowsstring: "Show rows:",
pagerrangestring: " of ",
pagerpreviousbuttonstring: "previous",
pagernextbuttonstring: "next",
pagerfirstbuttonstring: "first",
pagerlastbuttonstring: "last",
filterapplystring: "Apply",
filtercancelstring: "Cancel",
filterclearstring: "Clear Filter",
filterstring: "advanced",
filtersearchstring: "Search:",
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",
loadingerrormessage: "The data is still loading and you cannot set a property or call a method. You can do that once the data binding is completed. jqxDataTable raises the 'bindingComplete' event when the binding is completed."
};
Example
var getLocalization = function () {
var localizationobj = {};
localizationobj.pagerGoToPageString = "Gehe zu:";
localizationobj.pagerShowRowsString = "Zeige Zeile:";
localizationobj.pagerRangeString = " von ";
localizationobj.pagerNextButtonString = "voriger";
localizationobj.pagerFirstButtonString = "first";
localizationobj.pagerLastButtonString = "last";
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 = "after";
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", ""]
};
var patterns = {
d: "dd.MM.yyyy",
D: "dddd, d. MMMM yyyy",
t: "HH:mm",
T: "HH:mm:ss",
f: "dddd, d. MMMM yyyy HH:mm",
F: "dddd, d. MMMM yyyy HH:mm:ss",
M: "dd MMMM",
Y: "MMMM yyyy"
}
localizationobj.patterns = patterns;
localizationobj.months = months;
return localizationobj;
}
// prepare the data
var source =
{
dataType: "array",
dataFields: [
{ name: "name", type: "string" },
{ name: "quantity", type: "number" },
{ name: "id", type: "number" },
{ name: "parentid", type: "number" },
{ name: "price", type: "number" },
{ name: "date", type: "date" },
{ name: "customer", type: "string" }
],
hierarchy:
{
keyDataField: { name: 'id' },
parentDataField: { name: 'parentid' }
},
id: 'id',
localData: generateordersdata()
};
var dataAdapter = new $.jqx.dataAdapter(source);
// create Tree Grid
$("#treeGrid").jqxTreeGrid(
{
width: 680,
source: dataAdapter,
sortable: true,
pageable: true,
pagerMode: 'advanced',
localization: getLocalization(),
ready: function () {
$("#treeGrid").jqxTreeGrid('expandRow', '2');
},
columns: [
{ text: 'Bestellung Name', dataField: "name", align: 'center', width: 200 },
{ text: 'Auftraggeber', dataField: "customer", align: 'center', width: 200 },
{ text: 'Preis', dataField: "price", cellsFormat: "c2", align: 'center', cellsAlign: 'right', width: 80 },
{ text: 'Bestellung Datum', dataField: "date", align: 'center', cellsFormat: "dd-MMMM-yyyy hh:mm",
cellsRenderer: function (rowKey, column, cellValue, rowData, cellText)
{
if (rowData.level === 0) {
return dataAdapter.formatDate(cellValue, "dd-MMMM-yyyy");
}
return cellText;
}
}
]
});