jQWidgets Forums

Tagged: date, format, grid, jqxgrid, localization

This topic contains 3 replies, has 2 voices, and was last updated by Nadezhda 10 years, 8 months ago.

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

Author

Display Localized Formatted Date and Currency Symbol Posts

September 25, 2014 at 9:40 am Display Localized Formatted Date and Currency Symbol #60039

Participant

Hi,

I wanted to display the grid data in localized format based on user preferences. So, same grid data should be displayed with different Date format and Currency symbol to different user based on respective user’s preference. User’s localization preference may different from his machine’s setting. Can you please provide any sample how it can be done?

September 25, 2014 at 12:39 pm Display Localized Formatted Date and Currency Symbol #60053

Nadezhda

Participant

Hello yatinpatel,

Please, find below an example with German and English but if you want to use different language you should translate the data to that language and expand getLocalization:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <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="../../jqwidgets/jqxdropdownlist.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 availableCultures = [ 
               'German (Germany)', 'English (United States)' 
            ];
            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);  

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                showfilterrow: true,
                filterable: true,
                pageable: true,
                autoheight: true,
                editable: true,
                localization: getLocalization('de'),
                selectionmode: 'singlecell',
                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' }
                ]
            });
            $("#jqxDropDownList").jqxDropDownList({ source: availableCultures, selectedIndex: 0, width: '200px', height: '25px' });
            // set the localization.

            $("#jqxDropDownList").on('select', function (event) {
                var index = event.args.index;
                switch (index) {                   
                    case 0:                        
                            $("#jqxgrid").jqxGrid('localizestrings', getLocalization('de'));                       
                        break;
                    case 1:                       
                        $("#jqxgrid").jqxGrid('localizestrings', getLocalization('en'));
                        break;                               
                }
            });

        });
    </script> 
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
    <div style='float: left;'>
        <div style='float: left; font-family: "Verdana", "sans-serif"; font-size: 13px;'>Choose Culture</div>
        <br />        
        <div style='float: left;' id='jqxDropDownList'></div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

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

September 30, 2014 at 9:06 am Display Localized Formatted Date and Currency Symbol #60338

yatinpatel

Participant

Hi,

Thanks for your reply. I used localization js but when i apply dd/MM/yyyy format then date like 01/10/2013 is not formatted it returns 4 or 3 digit number like 1012. And date like 25/09/2013 is formatted properly.
Is there any issue for date which starts with 0 in day part of date?

October 1, 2014 at 11:30 am Display Localized Formatted Date and Currency Symbol #60451

Nadezhda

Participant

Hi yatinpatel,

Please, provide a sample which illustrates your issue. We can not reproduce it with above example.

Best Regards,
Nadezhda

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

Author

Posts

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

You must be logged in to reply to this topic.