jQWidgets Forums

Tagged: 0, cellsformat, database, date, format, grid, jqxgrid, zero

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

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

Author

Time format does not work with 0's Posts

March 21, 2014 at 10:46 pm Time format does not work with 0's #51577

Participant

I have a a grid that is displaying some times that are pulled from my database and when there is a valid time present, the formatting works correctly (it also works, shows nothing, when the time value is NULL). However, when the time value is all 0’s (0000-00-00 00:00:00), the formatting is not applied. Ive attached a picture to illustrate what exactly is going on.

Grid

here are the column and datafield definitions for the grid:

column:

{ text: "In", datafield: "time_in_1", columntype: 'datetimeinput', cellsformat: "hh:mm tt", width: 80 },

source/datafield:

{ name: 'time_in_1', type: 'date', format: "yyyy-MM-dd HH:mm:ss" },

March 24, 2014 at 7:40 am Time format does not work with 0's #51696

Dimitar

Participant

Hello aoverton07,

Please share what is the format of your data source (XML, JSON, CSV, etc.) On our side, this scenario works, but the date is displayed as 12:00 AM.

Best Regards,
Dimitar

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

March 24, 2014 at 7:17 pm Time format does not work with 0's #51773

aoverton07

Participant

returned as string from mysql to php in format “0000-00-00 00:00:00”, echoed from php to javascript using json_encode();

recieved as string in javascript as “0000-00-00 00:00:00”;

March 25, 2014 at 7:21 am Time format does not work with 0's #51805

Dimitar

Participant

Hi aoverton07,

Please share your source definition and grid initialization code.

Best Regards,
Dimitar

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

March 25, 2014 at 4:54 pm Time format does not work with 0's #51861

aoverton07

Participant

var detailSource = {
   url: '../phpDocs/someUrl.php',
   datatype: 'json',
   data: { action: 'timesheet_details', timesheetID: rowData.timesheet_id },
   datafields: [
	  { name: 'timesheet_detail_id', type: 'string' },
	  { name: 'timesheet_id', type: 'string' },
	  { name: 'date', type: 'date' },
	  { name: 'time_in_1', type: 'date', format: "yyyy-MM-dd HH:mm:ss" },
	  { name: 'time_out_1', type: 'date', format: "yyyy-MM-dd HH:mm:ss" },
	  { name: 'time_in_2', type: 'date', format: "yyyy-MM-dd HH:mm:ss" },
	  { name: 'time_out_2', type: 'date', format: "yyyy-MM-dd HH:mm:ss" },
	  { name: 'st_hours', type: 'string' },
	  { name: 'ot_hours', type: 'string' },
	  { name: 'dt_hours', type: 'string' }
  ]	
};

var detailAdapter = new $.jqx.dataAdapter(detailSource);

$("#timesheetDetailsGrid").jqxGrid({
	theme: theme,
        source: detailAdapter,
	height: 203,
	width: 665,
	rowsheight: 25,
	columnsresize: true,
	columns: [
		{ text: "detailID", datafield: 'timesheet_detail_id', hidden: true },
		{ text: 'timesheetID', datafield: 'timesheet_id', hidden: true },
		{ text: "Date", datafield: "date", columntype: 'datetimeinput', cellsalign: 'right', cellsformat: "ddd - MM-dd-yyyy", width: 150 },
		{ text: "", width: 15 },
		{ text: "ST", datafield: "st_hours", width: 40 },
		{ text: "OT", datafield: "ot_hours", width: 40 },
		{ text: "DT", datafield: "dt_hours", width: 40 },
		{ text: "", width: 15 },
		{ text: "In", datafield: "time_in_1", columntype: 'datetimeinput', cellsformat: "hh:mm tt", width: 80 },
		{ text: "Out", datafield: "time_out_1", columntype: 'datetimeinput', cellsformat: "hh:mm tt", width: 80 },
		{ text: "", width: 15 },
		{ text: "In", datafield: "time_in_2", columntype: 'datetimeinput', cellsformat: "hh:mm tt", width: 80 },
		{ text: "Out", datafield: "time_out_2", columntype: 'datetimeinput', cellsformat: "hh:mm tt", width: 80 }
	]
});

March 26, 2014 at 7:21 am Time format does not work with 0's #51904

Dimitar

Participant

Hello aoverton07,

We tested with the following example and there was no such issue:

<!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/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.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/dates.txt";

            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'in', type: 'date', format: "yyyy-MM-dd HH:mm:ss" },
                    { name: 'out', type: 'date', format: "yyyy-MM-dd HH:mm:ss" }
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                autoheight: true,
                source: dataAdapter,
                columnsresize: true,
                columns: [
                  { text: 'In', datafield: 'in', width: 250, cellsformat: "ddd - MM-dd-yyyy" },
                  { text: 'Out', datafield: 'out', minwidth: 120, cellsformat: "ddd - MM-dd-yyyy" }
              ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

And here is the contents of dates.txt:

[
    {
        "in": "0000-00-00 00:00:00",
        "out": "2014-03-11 10:00:00"
    },
    {
        "in": "2013-02-01 01:15:00",
        "out": "2015-08-11 10:00:00"
    }
]

Please make sure that you are using the latest version of jQWidgets (3.2.2) and that your PHP file returns a correct JSON. If nothing helps, you may use cellsrenderer to display a custom value (e.g. “No info”) when a cell’s value is “0000-00-00 00:00:00”.

Best Regards,
Dimitar

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

March 26, 2014 at 4:56 pm Time format does not work with 0's #51976

aoverton07

Participant

Hmmm that’s strange because I copy and pasted that code into one of your jsfiddle pages, and the problem persists:

http://jsfiddle.net/35kU5/45/

grid

March 27, 2014 at 6:46 am Time format does not work with 0's #52012

Dimitar

Participant

Hi aoverton07,

The Date is Invalid and should be handled manually in your app, not by our component. Here is how to “mask” this value with a custom message:

var zeroRenderer = function (row, columnfield, value, defaulthtml, columnproperties) {
    if (value == "0000-00-00 00:00:00") {
        return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + ';">no date set</span>';
    };
};

$("#jqxgrid").jqxGrid(
{
    width: 850,
    autoheight: true,
    source: dataAdapter,
    columnsresize: true,
    columns: [
        { text: 'In', datafield: 'in', width: 250, cellsformat: "ddd - MM-dd-yyyy", cellsrenderer: zeroRenderer },
        { text: 'Out', datafield: 'out', minwidth: 120, cellsformat: "ddd - MM-dd-yyyy" }
    ]
});

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.