jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Change localization › Reply To: Change localization
Hello fsigu,
You do not need the file globalize.culture.es-ES.js in order to localize your grid. Here is an example that works fine on our side:
<!DOCTYPE html>
<html lang="en">
<head>
<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/jqxdata.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/jqxlistbox.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.filter.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
<script type="text/javascript" src="generatedata.js"></script>
<script type="text/javascript" src="localization.js"></script>
<script type="text/javascript">
$(document).ready(function () {
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 localizationobj = {};
localizationobj.percentsymbol = "%";
localizationobj.currencysymbol = "$";
localizationobj.currencysymbolposition = "anterior";
localizationobj.decimalseparator = ".";
localizationobj.thousandsseparator = ",";
localizationobj.pagergotopagestring = "Ir a pag=";
localizationobj.pagershowrowsstring = "Mostrar filas=";
localizationobj.pagerrangestring = " de ";
localizationobj.pagerpreviousbuttonstring = "previo";
localizationobj.pagernextbuttonstring = "siguiente";
localizationobj.groupsheaderstring = "Arrastre una columna para que se agrupe por ella";
localizationobj.sortascendingstring = "Ordenar Acs";
localizationobj.sortdescendingstring = "Ordenar Des";
localizationobj.sortremovestring = "Quitar orden";
localizationobj.groupbystring = "Agrupar por esta columna";
localizationobj.groupremovestring = "Quitar de grupos";
localizationobj.filterclearstring = "Limpiar";
localizationobj.filterstring = "Filtro";
localizationobj.filtershowrowstring = "Mostrar filas donde=";
localizationobj.filtershowrowdatestring = "Mostrar filas donde fecha=";
localizationobj.filterorconditionstring = "O";
localizationobj.filterandconditionstring = "Y";
localizationobj.filterselectallstring = "(Seleccionar Todo)";
localizationobj.filterchoosestring = "Por favor seleccione:";
localizationobj.filterstringcomparisonoperators = ['vacio', 'no vacio', 'contenga', 'contenga(coicidir Mayusculas/Minusculas)',
'no contenga', 'no contenga(coincidir Mayusculas/Minusculas)', 'inicia con', 'inicia con(coicidir Mayusculas/Minusculas)',
'termina con', 'termina con(coicidir Mayusculas/Minusculas)', 'igual', 'igual(coicidir Mayusculas/Minusculas)', 'null', 'no null'
];
localizationobj.filternumericcomparisonoperators = ['=', '!=', '<', '<=', '>', '>=', 'null', 'no null'];
localizationobj.filterdatecomparisonoperators = ['=', '!=', '<', '<=', '>', '>=', 'null', 'no null'];
localizationobj.filterbooleancomparisonoperators = ['=', '!='];
localizationobj.validationstring = "Valor no valido";
localizationobj.emptydatastring = "No hay registros que mostrar";
localizationobj.filterselectstring = "Seleccione un Filtro";
localizationobj.loadtext = "Cargando...";
localizationobj.clearstring = "Limpiar";
localizationobj.todaystring = "hoy";
var days = {
// full day names
names: ["Domingo", "Lunes", "Martes", "Miercoles", "Jueves", "Viernes", "Sabado"],
// abbreviated day names
namesAbbr: ["Dom", "Lun", "Mar", "Mie", "Jue", "Vie", "Sab"],
// shortest day names
namesShort: ["Do", "Lu", "Ma", "Mi", "Ju", "Vi", "Sa"]
};
localizationobj.days = days;
var months = {
// full month names (13 months for lunar calendards -- 13th month should be "" if not lunar)
names: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Augosto", "Septiembre", "Octubre", "Noviembre", "Diciembre", ""],
// abbreviated month names
namesAbbr: ["Ene", "Feb", "Mar", "Abr", "May", "Jun", "Jul", "Ago", "Sep", "Oct", "Nov", "Dic", ""]
};
localizationobj.months = months;
$("#jqxgrid").jqxGrid(
{
width: 850,
source: dataAdapter,
showfilterrow: true,
filterable: true,
pageable: true,
autoheight: true,
editable: true,
selectionmode: 'singlecell',
ready: function () {
$("#jqxgrid").jqxGrid('localizestrings', localizationobj);
},
columns: [
{ text: 'Name', columntype: 'textbox', filtertype: 'textbox', datafield: 'name', width: 180 },
{ 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' }
]
});
});
</script>
</head>
<body class='default'>
<div id="jqxgrid">
</div>
</body>
</html>Best Regards,
Dimitar
jQWidgets team
http://www.jqwidgets.com/