jQuery UI Widgets Forums Grid Formatting a date retrieved from the database

This topic contains 2 replies, has 2 voices, and was last updated by  Dimitar 9 years, 6 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author

  • dchauhan
    Participant

    In the database the string is as follows “29/07/2014 2:38:33.683 PM”.

    I execute a stored procedure via jdbc to a sybase database in my java code I do the following:
    String Creation_date = rs1.getString(“creationDate”);
    – this returns a string in the format “2014-07-29 14:38:33.683”

    Below is my code, however my grid doesnt display the date formatted correctly. It shows “2014-07-29 14:38:33.683”

    I have been stuck on this for days now. Please help! Below is the code

    queryList:[
    {"available": false,"userName": "174861","queryType": "P ","businessModelName": "Branch Productivity","queryName": "Demo BP Chart","status": "N","reportType": "C","creationDate": "2014-07-29","updateDate": "2014-07-29","defaultReportFormat": "X","defaultReportFormatImg": "X"}]
     
            var QueryListData = new YAHOO.lang.JSON.parse(queryList);
     
            var QueryListDataSource =
                    {
                        datatype: "json",
                        datafields: [
                            {name: 'available', type: 'bool'},
                            {name: 'userName', type: 'string'},
                            {name: 'queryType', type: 'string'},
                            {name: 'businessModelName', type: 'string'},
                            {name: 'queryName', type: 'string'},
                            {name: 'status', type: 'string'},
                            {name: 'creationDate', type: 'date', format: 'yyyy-MM-dd HH:mm:ss.f'},
                            {name: 'updateDate', type: 'date', format: 'yyyy-MM-dd HH:mm:ss.f'},
                            {name: 'reportType', type: 'string'},
                            {name: 'defaultReportFormat', type: 'string'},
                            {name: 'defaultReportFormatImg', type: 'string'}
                        ],
                        id: 'QueryListid',
                        localdata: QueryListData
                    };
     
            QueryListSourceAdapter = new $.jqx.dataAdapter(QueryListDataSource);
     
     
        $(tagName).jqxGrid({
            source: QueryListSourceAdapter,
            columns: [
                {text: 'Select', menu: false, groupable: false, sortable: false, datafield: 'available', columntype: 'checkbox', width: 50},
                {text: 'queryType', dataField: 'queryType'},
                {text: 'Query Type', dataField: 'businessModelName', width: 150},
                {text: 'Report Name', groupable: false, dataField: 'queryName', width: 460},
                {text: 'Creation Date', dataField: 'creationDate', width: 200, cellsformat: 'D', filtertype: 'date'},
                {text: 'Update Date', dataField: 'updateDate', width: 200, cellsformat: 'dddd, MMMM dd, yyyy', filtertype: 'date'},
                {text: 'Report Format', dataField: 'reportType', width: 100, align: 'center', cellsalign: 'center',cellsrenderer: reportTypeRenderer},
                {text: 'User Name', dataField: 'userName', hidden: 'true'},
                {text: 'Default Report Format text', dataField: 'defaultReportFormat', hidden: 'true'}
            ]
        });
    

    dchauhan
    Participant

    sorry this is the code

    queryList:[
    {"available": false,"userName": "174861","queryType": "P ","businessModelName": "Branch Productivity","queryName": "Demo BP Chart","status": "N","reportType": "C","creationDate": "2014-07-29 14:38:33.683","updateDate": "2014-07-29","defaultReportFormat": "X","defaultReportFormatImg": "X"}]
     
            var QueryListData = new YAHOO.lang.JSON.parse(queryList);
     
            var QueryListDataSource =
                    {
                        datatype: "json",
                        datafields: [
                            {name: 'available', type: 'bool'},
                            {name: 'userName', type: 'string'},
                            {name: 'queryType', type: 'string'},
                            {name: 'businessModelName', type: 'string'},
                            {name: 'queryName', type: 'string'},
                            {name: 'status', type: 'string'},
                            {name: 'creationDate', type: 'date', format: 'yyyy-MM-dd HH:mm:ss.f'},
                            {name: 'updateDate', type: 'date', format: 'yyyy-MM-dd HH:mm:ss.f'},
                            {name: 'reportType', type: 'string'},
                            {name: 'defaultReportFormat', type: 'string'},
                            {name: 'defaultReportFormatImg', type: 'string'}
                        ],
                        id: 'QueryListid',
                        localdata: QueryListData
                    };
     
            QueryListSourceAdapter = new $.jqx.dataAdapter(QueryListDataSource);
     
     
        $(tagName).jqxGrid({
            source: QueryListSourceAdapter,
            columns: [
                {text: 'Select', menu: false, groupable: false, sortable: false, datafield: 'available', columntype: 'checkbox', width: 50},
                {text: 'queryType', dataField: 'queryType'},
                {text: 'Query Type', dataField: 'businessModelName', width: 150},
                {text: 'Report Name', groupable: false, dataField: 'queryName', width: 460},
                {text: 'Creation Date', dataField: 'creationDate', width: 200, cellsformat: 'D', filtertype: 'date'},
                {text: 'Update Date', dataField: 'updateDate', width: 200, cellsformat: 'dddd, MMMM dd, yyyy', filtertype: 'date'},
                {text: 'Report Format', dataField: 'reportType', width: 100, align: 'center', cellsalign: 'center',cellsrenderer: reportTypeRenderer},
                {text: 'User Name', dataField: 'userName', hidden: 'true'},
                {text: 'Default Report Format text', dataField: 'defaultReportFormat', hidden: 'true'}
            ]
        });
    

    Dimitar
    Participant

    Hello dchauhan,

    There is no need to parse such source data. Here is an example, based on your code, in which the date cell is formatted correctly:

    <!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.10.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/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.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/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var queryList = [{ "available": false, "userName": "174861", "queryType": "P ", "businessModelName": "Branch Productivity", "queryName": "Demo BP Chart", "status": "N", "reportType": "C", "creationDate": "2014-07-29 14:38:33.683", "updateDate": "2014-07-29", "defaultReportFormat": "X", "defaultReportFormatImg": "X"}]
    
                var QueryListDataSource =
                    {
                        datatype: "array",
                        datafields: [
                            { name: 'available', type: 'bool' },
                            { name: 'userName', type: 'string' },
                            { name: 'queryType', type: 'string' },
                            { name: 'businessModelName', type: 'string' },
                            { name: 'queryName', type: 'string' },
                            { name: 'status', type: 'string' },
                            { name: 'creationDate', type: 'date', format: 'yyyy-MM-dd HH:mm:ss.f' },
                            { name: 'updateDate', type: 'date', format: 'yyyy-MM-dd HH:mm:ss.f' },
                            { name: 'reportType', type: 'string' },
                            { name: 'defaultReportFormat', type: 'string' },
                            { name: 'defaultReportFormatImg', type: 'string' }
                        ],
                        id: 'QueryListid',
                        localdata: queryList
                    };
    
                var QueryListSourceAdapter = new $.jqx.dataAdapter(QueryListDataSource);
    
                var tagName = "#jqxgrid";
    
                $(tagName).jqxGrid({
                    source: QueryListSourceAdapter,
                    columns: [
                        { text: 'Select', menu: false, groupable: false, sortable: false, datafield: 'available', columntype: 'checkbox', width: 50 },
                        { text: 'queryType', dataField: 'queryType' },
                        { text: 'Query Type', dataField: 'businessModelName', width: 150 },
                        { text: 'Report Name', groupable: false, dataField: 'queryName', width: 460 },
                        { text: 'Creation Date', dataField: 'creationDate', width: 200, cellsformat: 'D', filtertype: 'date' },
                        { text: 'Update Date', dataField: 'updateDate', width: 200, cellsformat: 'dddd, MMMM dd, yyyy', filtertype: 'date' },
                        { text: 'Report Format', dataField: 'reportType', width: 100, align: 'center', cellsalign: 'center' },
                        { text: 'User Name', dataField: 'userName', hidden: 'true' },
                        { text: 'Default Report Format text', dataField: 'defaultReportFormat', hidden: 'true' }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.