jQWidgets Forums

Tagged: grid globalization, javascript grid localization, jquery grid localization, jqwidgets grid localization

This topic contains 2 replies, has 2 voices, and was last updated by wfr 11 years, 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Problem with localization Posts

March 5, 2014 at 10:32 am Problem with localization #50515

wfr

Participant

Hi,
My localization code is not working. Everything else works fine.
Maybe I have placed something in the wrong place or missed something.

<!DOCTYPE html> 
<html>

<head> 

	<title>Titel</title>
	<meta charset="utf-8">
	<link rel="stylesheet" 
    href="../../jqwidgets/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" 
    href="../../jqwidgets/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
	<script type="text/javascript" src="../../jqwidgets/scripts/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="../../jqwidgets/jqwidgets/jqx-all.js"></script>

	<script>

		$(document).ready(function () {
		// prepare the data
		var source ={
		datatype: "json",
		datafields: [
		{ name: 'datum', type: 'date' },
		{ name: 'bank', type: 'string' },
		{ name: 'bank_wert', type: 'number' },
		{ name: 'zu_an', type: 'string' },
		{ name: 'zu_wert', type: 'number' },
//		{ name: 'info_text', type: 'string' },
//		{ name: 'info_wert', type: 'number' },
//		{ name: 'bemerkungen', type: 'string' },
		],

		url: 'data.php'

		};

		var dataAdapter = new $.jqx.dataAdapter(source);

		// define grid parameter
		$("#jqxgrid").jqxGrid({
			source: dataAdapter ,
			theme: 'classic' ,
			width: 650 ,
			sortable: true ,
			filterable: true ,
			//filtermode: 'excel' ,
			//autoshowfiltericon: false ,
			showfilterrow: true ,
			autoheight: true ,
			editable: true ,
			selectionmode: 'singlecell' ,
			
			// define column parameter
			columns: [
			{ text: 'Datum', datafield: 'datum', width: 112, cellsformat: 'dd.MM.yyyy', columntype: 'datetimeinput', filtertype: 'date' },
			{ text: 'Bank', datafield: 'bank', width: 150, columntype: 'combobox', filtertype: 'textbox',
				createeditor: function (row, column, editor) {
                // assign a new data source to the combobox.
                var list = ['SPK', 'STP', 'VB', 'RK', 'SH', 'EÖ', 'FC' ];
                editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: "Wähle:" });
                },
                // update the editor's value before saving it.
                cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                // return the old value, if the new value is empty.
                if (newvalue == "") return oldvalue;
                }
                },
			{ text: 'Bank-Wert', datafield: 'bank_wert', width: 100, cellsformat: 'F2', cellsalign: 'right', filtertype: 'textbox' },
			{ text: 'Zahlung unterwegs an', datafield: 'zu_an', width: 180, columntype: 'textbox', filtertype: 'textbox' },
			{ text: 'ZU-Wert', datafield: 'zu_wert', width: 100, cellsformat: 'F2', cellsalign: 'right', filtertype: 'textbox' }

			]
			});

			// Localization
			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>

</head>
   
<body>
    
    <div id="jqxgrid"></div>
    
</body>

</html>

Thank you
Walter

March 6, 2014 at 5:00 am Problem with localization #50551

Peter Stoev

Keymaster

Hi Walter,

The problem is that at the point you localize the Grid, the Grid is still not rendered and is loading its data i.e your localization code should be either in “ready” or “bindingcomplete” functions or you should set the Grid’s localization property to point to your localization object during the Grid’s initialization.

Here’s how to apply localization:

` var data = generatedata(250);
var source =
{
localdata: data,
datafields:
[
{ name: ‘name’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘date’, type: ‘date’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ }
],
datatype: “array”
};
var dataAdapter = new $.jqx.dataAdapter(source);
var getLocalization = 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”;
localizationobj.firstDay = 1;
localizationobj.percentsymbol = “%”;
localizationobj.currencysymbol = “€”;
localizationobj.currencysymbolposition = “after”;
localizationobj.decimalseparator = “.”;
localizationobj.thousandsseparator = “,”;
localizationobj.emptydatastring = “keine Daten angezeigt”;
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;
localizationobj.todaystring = “Heute”;
localizationobj.clearstring = “Löschen”;
return localizationobj;
}
$(“#jqxgrid”).jqxGrid(
{
width: 685,
source: dataAdapter,
showfilterrow: true,
filterable: true,
pageable: true,
autoheight: true,
editable: true,
localization: getLocalization(),
selectionmode: ‘singlecell’,
columns: [
{ text: ‘Name’, columntype: ‘textbox’, filtertype: ‘textbox’, datafield: ‘name’, width: 115 },
{ text: ‘Produkt’, filtertype: ‘textbox’, datafield: ‘productname’, width: 220 },
{ text: ‘Datum’, datafield: ‘date’, columntype: ‘datetimeinput’, filtertype: ‘date’, width: 210, cellsalign: ‘right’, cellsformat: ‘d’ },
{ text: ‘Qt.’, datafield: ‘quantity’, columntype: ‘numberinput’, filtertype: ‘textbox’, cellsalign: ‘right’, width: 60 },
{ text: ‘Preis’, datafield: ‘price’, columntype: ‘numberinput’, filtertype: ‘textbox’, cellsformat: “c2”, cellsalign: ‘right’ }
]
});`

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

March 6, 2014 at 7:36 am Problem with localization #50568

wfr

Participant

Thanks a lot, Peter!

Walter

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.