jQWidgets Forums

Tagged: datagrid, datagridview, javascript datagrid, localization in grid

This topic contains 7 replies, has 3 voices, and was last updated by Christophe Opoix 12 years, 4 months ago.

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

Author

Localization in grid with json data type Posts

August 7, 2012 at 7:18 am Localization in grid with json data type #6660

jqdev

Member

Hello,

I have problem with localization when I return data using json. It doesn’t work with currency symbol, separator when I user json but works with data type array.

This demo illustrates the basic functionality of the Grid plugin. The jQWidgets Grid plugin offers rich support for interacting with data, including paging, grouping and sorting.

$(document).ready(function () {
// prepare the data

var source =
{
datatype: “json”,
datafields: [
{ name: ‘comp_name’ },
{ name: ‘first_name’ },
{ name: ‘last_name’ },
{ name: ‘price’ },
{ name: ‘perc’ }
],
id: ‘id’,
url: ‘data.php’,
root: ‘data’

};
var localizationobj = {};

localizationobj.currencysymbol = “€”;
localizationobj.currencysymbolposition = “before”;
localizationobj.decimalseparator = “.”;
localizationobj.thousandsseparator = ” “;

// apply localization.
$(“#jqxgrid”).jqxGrid(‘localizestrings’, localizationobj);
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: source,
pageable: true,
filterable:true,
autoheight: true,
columns: [
{ text: ‘comp name’, datafield: ‘comp_name’, width: 130 },
{ text: ‘first name’, datafield: ‘first_name’, cellsformat: ‘D’ },
{ text: ‘last name’, datafield: ‘last_name’, width: 160 },
{ text: ‘price’, datafield: ‘price’, width: 160, cellsformat: ‘c’ },
{ text: ‘perc’, datafield: ‘perc’, width: 160 }
]
});

});

August 7, 2012 at 9:00 am Localization in grid with json data type #6661

jqdev

Member

Please let me know to make it work.

August 7, 2012 at 9:15 pm Localization in grid with json data type #6669

Peter Stoev

Keymaster

Hi jqdev,

The issue is that you try to apply a localization to a Grid which is still not initialized. See this sample which demonstrates how to localize the Grid: localization.htm.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>The Grid plugin can localize all the displayed strings by passing a localization object to the 'localizestrings' function.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.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.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var url = "../sampledata/orders.xml";
            var parentsLength = $("#jqxWidget").parents().length;
            if (parentsLength > 3) {
                url = 'demos/sampledata/orders.xml';
            }
            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
                    { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
                    { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:OrderID',
                url: url
            };
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: source,
                theme: theme,
                altrows: true,
                autoheight: true,
                pageable: true,
                sortable: true,
                columns: [
                  { text: 'Ship Name', datafield: 'ShipName', width: 250 },
                  { text: 'Ship Stadt', datafield: 'ShipCity', width: 100 },
                  { text: 'Ship Land', datafield: 'ShipCountry' }
                ]
            });
            $("#jqxgrid").bind('bindingcomplete', 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";
                // apply localization.
                $("#jqxgrid").jqxGrid('localizestrings', localizationobj);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div style="float: left;" id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 16, 2013 at 4:05 pm Localization in grid with json data type #13712

Christophe Opoix

Participant

Actually this won’t work if you also have filtering, it will lose focus on the filters.

Can we get the parameter we specify in the filter function :

$("#jqxGrid").jqxGrid('updatebounddata', 'filter');

So we can ignore those events ?

If not, you have to unbind the event after the first execution, like this :

var jqxgridlocalizationobj = {...};
var localizeString = function(event) {
    $("#jqxGrid").jqxGrid('localizestrings', jqxgridlocalizationobj);
    $("#jqxGrid").unbind('bindingcomplete', localizeString)
};
$("#jqxGrid").bind('bindingcomplete', localizeString);

But IMO it rather should allow localization to be applied even if the data isn’t loaded.

January 16, 2013 at 4:25 pm Localization in grid with json data type #13714

Peter Stoev

Keymaster

Hi Christophe Opoix,

In jQWidgets 2.6, It would be better to localize the strings in the ‘ready’ callback.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 17, 2013 at 11:01 am Localization in grid with json data type #13787

Christophe Opoix

Participant

Hi,

Thanks for your response. However, the localization sample in 2.6 still uses the bindingcomplete event.

And the message still displays when using :

$("#jqxGrid").ready(localizeString);

Can you provide a sample on how to localize on the ready event ?

January 17, 2013 at 11:06 am Localization in grid with json data type #13788

Peter Stoev

Keymaster

Hi Christophe Opoix,

Localization could be done in several different ways. The Grid in the sample is bound just once and it is OK with ‘bindingcomplete’. $(“#jqxgrid”).ready is not a correct syntax. For using the ‘ready’ function, see ‘ready’ in the : jquery-grid-api.htm

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

January 17, 2013 at 1:06 pm Localization in grid with json data type #13800

Christophe Opoix

Participant

Ok this works.

Thanks.

Author

Posts

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

You must be logged in to reply to this topic.