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;
        }
      }
    ]
});