jQWidgets Forums

Tagged: datagrid date column, grid date format, jqxgrid

This topic contains 6 replies, has 2 voices, and was last updated by jborges@utad.pt 12 years, 4 months ago.

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

Author

json and date Posts

November 19, 2012 at 10:16 am json and date #11178

Member

my date are not rendered correctly. I have the following json file:
[{“AnoLectivo”:2012,”CodCurso”:”5019″,”CodRegime”:”T”,”myDate”:”\/Date(1350946800000+0100)\/”,”NomeCurso”:”ENGENHARIA INFORMÁTICA (1º CICLO)”,”NomeRegime”:”Trabalhador Estudante”,”Numero”:26385}]

where field date is “\/Date(1350946800000+0100)\/”

on the client I have:

datatype: “json”,
datafields: [
{ name: ‘AnoLectivo’},
{ name: ‘CodCurso’},
{ name: ‘CodRegime’},
{ name: myDate,type: ‘date’ },
{ name: ‘NomeCurso’},
{ name: ‘NomeRegime’},
{ name: ‘Numero’}
],

where the field myDate is definied with type ‘date’

and the

$(“#jqxgrid”).jqxGrid(
{
source: data,
theme: ‘classic’,
columns: [
{ text: ‘Ano Lectivo’, datafield: ‘AnoLectivo’, width: 90},
{ text: ‘Cod. Curso’, datafield: ‘CodCurso’, width: 80 },
{ text: ‘Cod. Regime’, datafield: ‘CodRegime’, width: 90 },
{ text: ‘Data Inicio’, datafield: ‘myDate’ 120, cellsformat: ‘yyyy-MM-dd’ },
{ text: ‘Curso’, datafield: ‘NomeCurso’, width: 320 },
{ text: ‘Regime’, datafield: ‘NomeRegime’, width: 170 },
{ text: ‘Número’, datafield: ‘Numero’, width: 70 }
]
});

but the jqgrid is rendering 0NaN-NaN-NaN.

So, what am i missing?

Regards.
Jorge Boges

November 19, 2012 at 10:31 am json and date #11183

Peter Stoev

Keymaster

Hi Jorge,

The following code is tested and works with jQWidgets 2.5 and jQuery 1.8.2. If you use a previous version, please try the latest one.

<!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.8.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.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var data = '[{ "AnoLectivo": 2012, "CodCurso": "5019", "CodRegime": "T", "myDate": "\/Date(1350946800000+0100)\/", "NomeCurso": "ENGENHARIA INFORMÁTICA (1º CICLO)", "NomeRegime": "Trabalhador Estudante", "Numero": 26385 }]';
            var source =
            {
                datatype: 'json',
                localdata: data,
                datafields: [
                    { name: 'AnoLectivo' },
                    { name: 'CodCurso' },
                    { name: 'CodRegime' },
                    { name: 'myDate', type: 'date' },
                    { name: 'NomeCurso' },
                    { name: 'NomeRegime' },
                    { name: 'Numero' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $('#jqxgrid').jqxGrid(
            {
                source: dataAdapter,
                theme: 'classic',
                columns: [
                    { text: 'Ano Lectivo', datafield: 'AnoLectivo', width: 90},
                    { text: 'Cod. Curso', datafield: 'CodCurso', width: 80 },
                    { text: 'Cod. Regime', datafield: 'CodRegime', width: 90 },
                    { text: 'Data Inicio', datafield: 'myDate', width: 120, cellsformat: 'yyyy-MM-dd' },
                    { text: 'Curso', datafield: 'NomeCurso', width: 320 },
                    { text: 'Regime', datafield: 'NomeRegime', width: 170 },
                    { text: 'Número', datafield: 'Numero', width: 70 }
                ]
           });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 19, 2012 at 10:59 am json and date #11186

jborges@utad.pt

Member

after some testing I have just realized that it’s working great on chrome, firefox, opera, but i was testing with ie 9.0 (on 2 different computers) where i still got the error. here’s my link: https://apps2.utad.pt/wsSIGACADRest/teste2.html

So what’s the workaround for IE, or am i still missing something?

Best Regards,
Jorge Borges

November 19, 2012 at 12:04 pm json and date #11189

Peter Stoev

Keymaster

Hi Jorge,

I tested the code again and confirm that the JavaScript Date object wasn’t able to parse correctly the ‘\/Date(1350946800000+0100)\/’ string in IE7 and IE8. It worked fine with IE9, at least on my side. Here’s the updated code which you can use as a temporary workaround:

<!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.8.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.filter.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.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/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var data = '[{ "AnoLectivo": 2012, "CodCurso": "5019", "CodRegime": "T", "myDate": "\/Date(1350946800000+0100)\/", "NomeCurso": "ENGENHARIA INFORMÁTICA (1º CICLO)", "NomeRegime": "Trabalhador Estudante", "Numero": 26385 }]';
            var source =
            {
                datatype: 'json',
                localdata: data,
                datafields: [
                    { name: 'AnoLectivo' },
                    { name: 'CodCurso' },
                    { name: 'CodRegime' },
                    { name: 'myDate'},
                    { name: 'NomeCurso' },
                    { name: 'NomeRegime' },
                    { name: 'Numero' }
                ]
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var gridLocalization = null;
            $('#jqxgrid').jqxGrid(
            {
                source: dataAdapter,
                theme: 'classic',
                ready: function()
                {
                    gridLocalization = $('#jqxgrid').jqxGrid('gridlocalization');
                },
                columns: [
                    { text: 'Ano Lectivo', datafield: 'AnoLectivo', width: 90 },
                    { text: 'Cod. Curso', datafield: 'CodCurso', width: 80 },
                    { text: 'Cod. Regime', datafield: 'CodRegime', width: 90 },
                    {
                        text: 'Data Inicio', datafield: 'myDate', width: 120, cellsformat: 'yyyy-MM-dd', cellsrenderer:
                        function(row, colum, value)
                        {
                            var jsonDateRE = /^\/Date\((-?\d+)(\+|-)?(\d+)?\)\/$/;
                            var arr = jsonDateRE.exec(value);
                            if (arr) {
                                // 0 - complete results; 1 - ticks; 2 - sign; 3 - minutes
                                var result = new Date(parseInt(arr[1]));
                                if (arr[2]) {
                                    var mins = parseInt(arr[3]);
                                    if (arr[2] === "-") {
                                        mins = -mins;
                                    }
                                    var current = result.getUTCMinutes();
                                    result.setUTCMinutes(current - mins);
                                }
                                if (!isNaN(result.valueOf())) {
                                    if (gridLocalization == null) gridLocalization = $('#jqxgrid').jqxGrid('gridlocalization');
                                    var date = $.jqx.dataFormat.formatdate(result, 'yyyy-MM-dd', gridLocalization);
                                    return '<span style="float: left; margin: 4px;">' + date + '</span>';
                                }
                            }
                            return "";
                        }
                    },
                    { text: 'Curso', datafield: 'NomeCurso', width: 320 },
                    { text: 'Regime', datafield: 'NomeRegime', width: 170 },
                    { text: 'Número', datafield: 'Numero', width: 70 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxgrid">
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 19, 2012 at 12:31 pm json and date #11190

jborges@utad.pt

Member

Thanks, it worked.

I have IE 9.0 [9.0.8112.16421, Update version: 9.0.11 (KB 2761451) ] on win 7 64bit.

Export feature through IE is having the same behaviour: date is NaN, but works great on other browser.

Best Regards,
Jorge Borges

November 19, 2012 at 12:44 pm json and date #11191

Peter Stoev

Keymaster

Please, try the code I just posted. It will work for the export as well because the Grid exports what is loaded in the view.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

November 19, 2012 at 2:16 pm json and date #11192

jborges@utad.pt

Member

I have tried it, the grid format correctly the date but export with IE is still showing NaN. But I am not worry about it, it is still great having this widget rendering json data from a REST service. Great work!!!

Best Regards,
Jorge Borges

Author

Posts

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

You must be logged in to reply to this topic.