[qtipaddictParticipant]

Okay I’ve sort of narrowed it down. The milliseconds in var data = '[{"startDate":"2014-11-06 00:00:00.0"}]'; is throwing off format: "yyyy-MM-ddTHH:mm:ss". I tried ‘.S’ and ‘.f’ for the milliseconds but no joy. The Grid’s Data Sources help topic has an example of date formatting but it does not include the milliseconds.

[qtipaddictParticipant]

Do you mean format: "yyyy-MM-ddTHH:mm:ss"? Or, var data = '[{"startDate":"2014-11-06T00:00:00.0"}]';?

I defined a style called “max” and then I added cellclassname to the grid like this:

{ text: 'date', datafield: 'startDate', cellsformat: 'ddHHmmZ MMM yyyy', cellclassname: 'max' }

but the colors did not change. What did I do wrong? http://jsfiddle.net/ze5crhdh/1/

[qtipaddictParticipant]

I noticed we don’t get the same results without the “.z” in format: "yyyy-MM-dd HH:mm:ss.z". Unfortunately, this converts the date into local time. I need the formatted date to be in UTC.

[qtipaddictParticipant]

Thank you, Peter. I had to remove my custom cellsrenderer for the date to appear in the correct format. I learned that from your post in a different thread, http://www.jqwidgets.com/community/topic/problem-with-jqx-dataformat-formatdate-with-culture/. So now that I’m using the built-in rendering, I guess there’s no way for me to change the color of the text in that cell.

[qtipaddictParticipant]

I found a similar topic to the problem I am having, http://www.jqwidgets.com/community/topic/jqxgrid-date-formating
I believe these two jsFiddles will make things clearer.

Example using “2014-11-06T00:00:00” and cellsformat works.
http://jsfiddle.net/r3d3Lc14/1/

Example using “2014-11-06 00:00:00” (no ‘T’) and cellsformat has no effect.
http://jsfiddle.net/r3d3Lc14/2/

In my application, I get the date from the Postgresql database which stores and returns timestamps in the format ‘yyyy-MM-dd HH:mm:ss’. I do not want to use the dataAdapter’s formatDate and hand-write the html for my grid as shown in your example.

[qtipaddictParticipant]

But which callback function should I use in jqxDataAdapter? loadComplete doesn’t help me because I already format the Date objects when the data in the grid is fully loaded. It’s when the date is changed that it needs to be formatted again for display. And what do you mean “jqxDataAdapter or something else”? What else could I use besides jqxDataAdapter?

[qtipaddictParticipant]

Sorry, I am not deliberately trying to be difficult. I’m sending JSON to the server. JSON does not have a Date type so there’s no choice but to send the date as a formatted String. If I try to send a Javascript Date object, the server will complain. I re-read your posts several times already. If I missed your instructions, please repeat them in detailed steps so that there is no miscommunication. Thanks.

[qtipaddictParticipant]

But I don’t call toString() on the Date value. The Date field is set to type: 'date' in the dataSource. I also use cellsformat: 'yyyy-MM-dd HH:mm:ss' and the initeditor to format the date like you taught me.

initeditor: function (row, cellvalue, editor) {
            var startDate = moment(cellvalue, "YYYY-MM-DD HH:mm:ss").toDate();
            editor.jqxDateTimeInput('setDate', startDate);
          }

Somehow after cellendedit, jqWidgets loses the date format information and displays the raw value of the Date object. Because when I refresh the grid, the date is properly formatted. So as a temporary workaround, I call the grid’s updatebounddata in cellendedit. I would rather do it when the AJAX PUT succeeds but there’s no way to know when the AJAX call will return.

[qtipaddictParticipant]

The date time issue I am trying to explain happens after the “cellvaluechanged” function sends a PUT request to the webserver so I cannot replicate for you using only jsfiddle. But I started the partial code on jsfiddle, http://jsfiddle.net/elai/FdxxR/2/.

Or, if you can see this screenshot. http://tinypic.com/r/rusj2r/8
After the value of “Start Time” is updated, it shows “Fri Aug 01 2014 14:12:44” but I want it to show “2014-08-01 14:12:44”. “End Time” is the value from the database.

[qtipaddictParticipant]

Thanks. But after I save the date “2014-07-28 00:00:00” to the database, jqWidgets changes the display of the date to “Mon Jul 28 2014 00:00:00”. How do I override that behavior?

[qtipaddictParticipant]

Thanks Peter but the default value of the datetimeinput is a killer for me. After the grid is initialized with data and I click on a datetimeinput cell, the existing value is overridden by today’s date. I would really like to be able to turn that off. Also, when I set the date, it appears as “Tue Jul 22 2014 09:00:00″ but when I click in the cell, it becomes “2014-07-22 09:00:00″. Also, the date picker doesn’t let you set the time so I have to type it in. All of that makes it too frustrating for me as developer and the end-user. So, I resorted to using a textfield for dates. I use an external date.js script to convert between String and Date because I have to GET and PUT JSON as well as to validate the Date objects. If the jqWidgets team makes improvements on the datetimeinput, then I would be willing to revisit it at a later time.

[qtipaddictParticipant]

Also, how can I check if the value in the “End Date” column is greater than the value in the “Start Date” column? I tried using cellendedit and showvalidationpopup but I get this error:

TypeError: this.validationpopuparrow is undefined in jqxgrid.edit.js (line 7)
…index: 99999; top: 0px; left: 0px; position: absolute;’ id=’dropdownlisteditor’>…

$("#jqxgrid").on('cellendedit', function (event)
    {
        debug("In cell end edit");
        var column = args.datafield;
        var rowIndex = args.rowindex;
        var value = args.newvalue;
        var oldvalue = args.oldvalue;
console.log(column);
console.log(rowIndex);
        var rows = $("#jqxgrid").jqxGrid('getboundrows');
        var rowData = rows[rowIndex];

        var startDate = rowData.startDate;
        var endDate = rowData.startDate;
        
        if (Date.parse(endDate) <= Date.parse(startDate)) {
          $("#jqxgrid").jqxGrid('showvalidationpopup', rowIndex, column, "End Time must be greater than Start Time.");
        }
        // Resume grid auto-refresh
        refreshGridData();
    });

[qtipaddictParticipant]

Okay, I put the formatdate call in the cellvaluechanged function so I can massage the Date before sending it as part of a JSON PUT request to the server. But after I refresh the page, I click on the date picker and the existing date/time is replaced by today’s date with time 00:00:00. How do I make the date picker set itself to the date and time values that’s already in the cell?

Also, after setting the date and time with the date picker, the value in the cell shows “Tue Jul 22 2014 09:00:00”. When I click in the cell, it changes to “2014-07-22 09:00:00”. How do I make it so that the format is always “yyyy-MM-dd HH:mm:ss”?

[qtipaddictParticipant]

What should I do when the JSON is an array of arrays? “geometry>coordinates>0” returns nothing and “geometry>coordinates>1” returns 10 if I define the datafield as a float. If I don’t define the type, it returns a comma-separated string.

"coordinates": [

    [
        [
            10,
            10
        ],
        [
            20,
            10
        ],
        [
            20,
            20
        ],
        [
            10,
            20
        ],
        [
            10,
            10
        ]
    ]

]

[qtipaddictParticipant]

I think I figured it out.

var columnsrenderer = function (value) {
     return '<div style="text-align: center; margin-top: 5px;">' + value + '</div>';
 }

{ text: 'Latitude', datafield: 'latitude', width: 200, editable : false, renderer: columnsrenderer, cellsalign: 'center', cellsformat: 'f2' },

I was using a cellsrenderer which I guess overrides cellsformat. Is there way I can incorporate cellsformat into a div so I can use my cellsrenderer?

[Author]

Posts