jQWidgets Forums

Tagged: datagrid with localized strings, internationalization with Grid

This topic contains 3 replies, has 2 voices, and was last updated by Apeksha Singh 12 years ago.

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

Author

Localization in your jqxgrid. Posts

June 24, 2013 at 1:28 pm Localization in your jqxgrid. #23692

Apeksha Singh

Participant

Hi,

Please explain localization in jqxgrid.

I am confused in this section of code :-

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 = ",";
                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;

Please guide me as soon as possible.

Thanks & Regards,

Apeksha

June 24, 2013 at 1:29 pm Localization in your jqxgrid. #23697

Peter Stoev

Keymaster

Hi,

It is explained here: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-localization.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 24, 2013 at 1:41 pm Localization in your jqxgrid. #23700

Apeksha Singh

Participant

Hi Peter Stoev,

Thanks for your reply.

Regards,
Apeksha

June 25, 2013 at 8:53 am Localization in your jqxgrid. #23819

Apeksha Singh

Participant

Hi Peter Stoev,

Is it possible to have only one search box for all the columns of a grid.
I am adding my code below , where I have a search jqxinput filed and a jqxtab which contain 5 different grids.

$(".search").jqxInput({width: '100px',height: '20px',theme: 'ui-start',scrollPosition: 'left'});
				/*START :Function to display grid for all account*/
				var all_initGrid = function () {
						 gridid = "#all_invoicetable";//update gridid...
						var source =
						{
							datatype: "json",
							localdata: all_invoice_data,
							datafields:
							[
								
								{ name: 'id', type: 'number' },
								{ name: 'number', type: 'string' },
								{ name: 'reference', type: 'string' },
								{ name: 'contact_name', type: 'string' },
								{ name: 'contact_id', type: 'number' },
								{ name: 'date', type: 'string' },
								{ name: 'due_date', type: 'string' },
								{ name: 'paid', type: 'float' },
								{ name: 'due', type: 'float' },
								{ name: 'workflow_status_id', type: 'number' },
								{ name: 'workflow_status_status', type: 'string' },
								{ name: 'transaction_type_id', type: 'number' },
							],
						};
						var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
						// initialize jqxGrid
						$("#all_invoicetable").jqxGrid(
						{
							width: '97.7%', 
							autoheight:true,
							source: dataAdapter,
							enabletooltips: true,
							altrows: true,
							pageable: true,
							pagesizeoptions: ['10', '20','30','40','50'],
							editable:false,
							selectionmode: 'none',
							
							theme: 'metro',
							columns: [
		
							  { text: 'Id',datafield: 'id', width: '12%', hidden:true },
							  { text: 'Number',datafield: 'number', width: '12%' },
							  { text: 'Ref',datafield: 'reference',width: '12%' },
							  { text: 'To_id',datafield: 'contact_id',width: '12%', hidden:true },
							  { text: 'To',datafield: 'contact_name',width: '12%' },
							  { text: 'Date',datafield: 'date', width: '15%' },
							  { text: 'Due Date',datafield: 'due_date',width: '15%' },
							  { text: 'Paid',datafield: 'paid', width: '8%' },
							  { text: 'Due',datafield: 'due',width: '8%' },
							  { text: 'Status_id',datafield: 'workflow_status_id', width: '18%', hidden:true },
							  { text: 'Status',datafield: 'workflow_status_status', width: '18%' },
							  { text: 'transaction Type',datafield: 'transaction_type_id', width: '18%', hidden:true }
							]	
						}); 
				   } 
	/*END :Function to display grid for all account*/			   		   
	/*START :Function to display grid for draft*/
				var draft_initGrid = function () {
					gridid = "#draft_invoicetable";//update gridid...
						var source =
						{
							localdata: draft_invoice_data,
							datatype: "json",
							datafields:
							[   
							    { name: 'item', type: 'bool' },
								{ name: 'id', type: 'number' },
								{ name: 'number', type: 'string' },
								{ name: 'reference', type: 'string' },
								{ name: 'contact_name', type: 'string' },
								{ name: 'contact_id', type: 'number' },
								{ name: 'date', type: 'string' },
								{ name: 'due_date', type: 'string' },
								{ name: 'due', type: 'float' },
								{ name: 'workflow_status_id', type: 'number' },
								{ name: 'workflow_status_status', type: 'string' },
								{ name: 'transaction_type_id', type: 'number' },
							],
						};
						var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
						var columnCheckBox = null;
						var updatingCheckState = false;
						// initialize jqxGrid
						$("#draft_invoicetable").jqxGrid(
						{
							width: '97.7%', 
							autoheight:true,
							source: dataAdapter,
							enabletooltips: true,
							altrows: true,
							pageable: true,
							pagesizeoptions: ['10', '20','30','40','50'],
							editable:true,
							selectionmode: 'none',		
							theme: 'metro',
					columns: [
					 { text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () {
					      return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';
					   },
					    rendered: function (element) {
					    $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
					   },
					   { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
					   { text: 'Number',datafield: 'number', editable:false,width: '12%' },
					   { text: 'Ref',datafield: 'reference',editable:false,width: '12%' },
					   { text: 'To_id',datafield: 'contact_id',editable:false,width: '12%', hidden:true },
					   { text: 'To',datafield: 'contact_name',editable:false,width: '12%' },
					   { text: 'Date',datafield: 'date',editable:false, width: '15%' },
					   { text: 'Due Date',datafield: 'due_date',editable:false,width: '15%' },
					   { text: 'Due',datafield: 'due',editable:false,width: '8%' },
					   { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
					   { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
					   { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
					  ]	
				      }); 
				   } 	
	/*END :Function to display grid for draft*/
	/*START :Function to display grid for awaiting approval*/	   
				var awaiting_approval_initGrid = function () {
					gridid = "#awaiting_approval_invoicetable";//update gridid...
						var source =
						{
							localdata: awaiting_approval_invoice_data,
							datatype: "json",
							datafields:
							[   { name: 'item', type: 'bool' },
								{ name: 'id', type: 'number' },
								{ name: 'number', type: 'string' },
								{ name: 'reference', type: 'string' },
								{ name: 'contact_name', type: 'string' },
								{ name: 'contact_id', type: 'number' },
								{ name: 'date', type: 'string' },
								{ name: 'due_date', type: 'string' },
								{ name: 'due', type: 'float' },
								{ name: 'workflow_status_id', type: 'number' },
								{ name: 'workflow_status_status', type: 'string' },
								{ name: 'transaction_type_id', type: 'number' },
							],
						};
						var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
						var columnCheckBox = null;
						var updatingCheckState = false;
						// initialize jqxGrid
						$("#awaiting_approval_invoicetable").jqxGrid(
						{
							width: '97.7%', 
							autoheight:true,
							source: dataAdapter,
							enabletooltips: true,
							altrows: true,
							editable:true,
							pageable: true,
							pagesizeoptions: ['10', '20','30','40','50'],
							selectionmode: 'none',
							theme: 'metro',
							columns: [
					{ text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () {
	   				      return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';
					  },
					   rendered: function (element) {
					   $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
					 },
					 { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
					 { text: 'Number',datafield: 'number',editable:false, width: '12%' },
					 { text: 'Ref',datafield: 'reference',editable:false,width: '12%' },
					 { text: 'To_id',datafield: 'contact_id',width: '12%',editable:false, hidden:true },
					 { text: 'To',datafield: 'contact_name',editable:false,width: '12%' },
					 { text: 'Date',datafield: 'date',editable:false, width: '15%' },
					 { text: 'Due Date',datafield: 'due_date',editable:false,width: '15%' },
					 { text: 'Due',datafield: 'due',editable:false,width: '8%' },
					 { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
					 { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
					 { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
				        ]	
				      });
				   }
	/*END :Function to display grid for awaiting approval*/	
	/*START :Function to display grid for awaiting payment*/			   
				var awaiting_payment_initGrid = function () {
					gridid = "#awaiting_payment_invoicetable";//update gridid...
						var source =
						{
							localdata: awaiting_payment_grid_data,
							datatype: "json",
							datafields:
							[   { name: 'item', type: 'bool' },
								{ name: 'id', type: 'number' },
								{ name: 'number', type: 'string' },
								{ name: 'reference', type: 'string' },
								{ name: 'contact_name', type: 'string' },
								{ name: 'contact_id', type: 'number' },
								{ name: 'date', type: 'string' },
								{ name: 'due_date', type: 'string' },
								{ name: 'paid', type: 'float' },
								{ name: 'due', type: 'float' },
								{ name: 'workflow_status_id', type: 'number' },
								{ name: 'workflow_status_status', type: 'string' },
								{ name: 'transaction_type_id', type: 'number' },
							],
						};
						var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
						var columnCheckBox = null;
						var updatingCheckState = false;
						$("#awaiting_payment_invoicetable").jqxGrid(
						{
							width: '97.7%', 
							autoheight:true,
							source: dataAdapter,
							enabletooltips: true,
							altrows: true,
							pageable: true,
							pagesizeoptions: ['10', '20','30','40','50'],
							editable:true,
							selectionmode: 'none',
							theme: 'metro',
							columns: [
					  { text: '', columntype: 'checkbox', datafield: 'item', width: '7.5%', renderer: function () {
	    				        return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';
					    },
					    rendered: function (element) {
					    $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
					   },
					  { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
					  { text: 'Number',datafield: 'number',editable:false, width: '10%' },
					  { text: 'Ref',datafield: 'reference',editable:false,width: '12%' },
					  { text: 'To_id',datafield: 'contact_id',editable:false,width: '12%', hidden:true },
					  { text: 'To',datafield: 'contact_name',editable:false,width: '12%' },
					  { text: 'Date',datafield: 'date', editable:false,width: '12%' },
					  { text: 'Due Date',datafield: 'due_date',editable:false,width: '12%' },
					  { text: 'Paid',datafield: 'paid',editable:false, width: '8%' },
					  { text: 'Due',datafield: 'due',editable:false,width: '9%' },
					  { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
					  { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
					  { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
							]	
						});  
				   } 	
	/*END :Function to display grid for awaiting payment*/	
	/*START :Function to display grid for paid*/		   
				var paid_initGrid = function () {
					gridid = "#paid_invoicetable";//update gridid...
						var source =
						{
							localdata: paid_invoice_data,
							datatype: "json",
							datafields:
							[   { name: 'item', type: 'bool' },
								{ name: 'id', type: 'number' },
								{ name: 'number', type: 'string' },
								{ name: 'reference', type: 'string' },
								{ name: 'contact_name', type: 'string' },
								{ name: 'contact_id', type: 'number' },
								{ name: 'date', type: 'string' },
								{ name: 'workflow_status_id', type: 'number' },
								{ name: 'workflow_status_status', type: 'string' },
								{ name: 'transaction_type_id', type: 'number' },		
							],
						};
                                                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });
						var columnCheckBox = null;
						var updatingCheckState = false;
						// initialize jqxGrid
						$("#paid_invoicetable").jqxGrid(
						{
							width: '97.7%', 
							autoheight:true,
							source: dataAdapter,
							enabletooltips: true,
							altrows: true,
							pageable: true,
							pagesizeoptions: ['10', '20','30','40','50'],
							editable:true,
							selectionmode: 'none',
							theme: 'metro',
							columns: [
							  { text: '', columntype: 'checkbox', datafield: 'item', width: '8%', renderer: function () {
							    return '<div style="float:left;margin-left: 33.5%; margin-top: 5px;"></div>';},
							     rendered: function (element) {
							     $(element).jqxCheckBox({ theme: 'metro', width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
							  },
						          { text: 'Id',datafield: 'id', width: '12%',editable:false, hidden:true },
							  { text: 'Number',datafield: 'number',editable:false, width: '15%' },
							  { text: 'Ref',datafield: 'reference',editable:false,width: '22%' },
							  { text: 'To_id',datafield: 'contact_id',editable:false,width: '12%', hidden:true },
							  { text: 'To',datafield: 'contact_name',editable:false,width: '22%' },
							  { text: 'Date',datafield: 'date',editable:false, width: '15%' },
							  { text: 'Status_id',datafield: 'workflow_status_id',editable:false, width: '18%', hidden:true },
							  { text: 'Status',datafield: 'workflow_status_status',editable:false, width: '18%' },
							  { text: 'transaction Type',datafield: 'transaction_type_id',editable:false, width: '18%', hidden:true }
							] 	
						});
				   }
				   var initWidgets = function (tab) {
						switch (tab) {
							case 0:
								all_initGrid();
								break;
							case 1:
								draft_initGrid();		
								break;
							case 2:
								awaiting_approval_initGrid();				
								break;
							case 3:
								awaiting_payment_initGrid();				
								break;
							case 4:
								paid_initGrid();							
								break;
						}
				   }