jQWidgets Forums

jQuery UI Widgets Forums Grid Change localization

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 9 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Change localization #69547

    fsigu
    Participant

    I, i try to change the localization grid to spanish, i see this example

    Localization

    but i try to copy this sample but it do not work for me,

    I try too with download a globalize.culture.es-EC.js bu i do not know when i can use this

    this is my code.

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
    <link rel=”stylesheet” href=”jqwidgets/styles/jqx.classic.css” type=”text/css” />
    <script type=”text/javascript” src=”scripts/jquery-1.11.2.min.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxcore.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/jqxmenu.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.pager.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxgrid.filter.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdata.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxlistbox.js”></script>
    <script type=”text/javascript” src=”jqwidgets/jqxdropdownlist.js”></script>
    <script type=”text/javascript”>
    $(document).ready(function () {

    var imagerenderer = function (row, datafield, value) {
    var src = value;
    return ‘‘;
    }

    var imagerendererpdf = function (row, datafield, value) {
    var src = value;
    return ‘‘;
    }

    // prepare the data
    var theme = ‘classic’;
    var source =
    {
    datatype: “json”,
    datafields:
    [
    { name: ‘fecha_emision’, type: ‘date’},
    { name: ‘numero_comprobante’, type: ‘string’},
    { name: ‘tipo_comprobante’, type: ‘string’},
    { name: ‘estado_sri’, type: ‘string’},
    { name: ‘autorizacion’, type: ‘string’},
    { name: ‘clave_acceso’, type: ‘string’},
    { name: ‘archivo_xml’, type: ‘string’},
    { name: ‘archivo_pdf’, type: ‘string’}
    ],
    url: ‘lista_comprobantes_data.php’,
    filter: function () {
    // actualizamos la grilla enviando la solicitod al server
    $(“#jqxgrid”).jqxGrid(‘updatebounddata’, ‘filter’);
    }
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // inicio jqxGrid
    $(“#jqxgrid”).jqxGrid(
    {
    width: 800,
    source: dataAdapter,
    theme: theme,
    filterable: true,
    columns:
    [
    { text: ‘Fecha Emision’, datafield: ‘fecha_emision’,cellsformat: ‘d’, width: 120 },
    { text: ‘Numero Comprobante’, datafield: ‘numero_comprobante’, width: 160 },
    { text: ‘Tipo Comprobante’, datafield: ‘tipo_comprobante’, width: 140 },
    { text: ‘Estado’, datafield: ‘estado_sri’, width: 100 },
    { text: ‘Numero de Autorizacion’, datafield: ‘autorizacion’, width: 350 },
    { text: ‘Clave de Acceso’, datafield: ‘clave_acceso’, width: 420 },
    { text: ‘Xml’, datafield: ‘archivo_xml’, width: 40 , cellsrenderer: imagerenderer},
    { text: ‘Pdf’, datafield: ‘archivo_pdf’, width: 40 , cellsrenderer: imagerendererpdf}
    ]
    });

    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;
    // apply localization.
    $(“#jqxgrid”).jqxGrid(‘localizestrings’, localizationobj);

    });
    </script>
    </head>
    <body class=’default’>
    <center>
    <?php
    echo ‘<div id=”main”>’;
    echo ‘<h2>Consulta de comprobantes electrónicos</h2>’;
    echo ‘Salir‘;
    echo ‘</div>’;
    ?>
    <div id=”jqxgrid”></div>:
    </center>
    </body>
    </html>

    but when the run sample the spanish text do not show This continued in English

    Any idea please

    Change localization #69581

    Dimitar
    Participant

    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/

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

You must be logged in to reply to this topic.