cellsformatt with FireFox

[todd.cochranParticipant]

I am having an issue where the cellsformat that I am setting for the columns param does not work properly in Firefox. Everything works great in Chrome. Here is how I have set the columns property:

“columnsDef”:
{
“type”: “data_table”,
“columns”: [“text”, “datafield”, “width”, “columntype”,”editable”,”cellsformat”],
“rows”:
[
[“File Name”, “FileName”, 100, “textbox”,true,””],
[“File Size”,”FileSize”, 100, “numberinput”,true,””],
[“Creation Time”, “CreationTime”, 200, “datetimeinput”,true,”F”],
[“LastAccess Time”, “LastAccessTime”, 200, “datetimeinput”,true,”d”],
[“LastWrite Time”, “LastWriteTime”, 200, “datetimeinput”,true,”dd/MM/yyyy hh:mm:ss”]
]
},

This is an internal data structure that we use in our product. This basically gets turned into an array that looks like this:

columns[4]['text'] = 'LastWrite Time';
columns[4]['datafield'] = 'LastWriteTime';
columns[4]['width'] = 200;
columns[4]['columntype'] = 'datetimeinput';
columns[4]['editable'] = true;
columns[4]['cellsformat' = 'dd/MM/yyyy hh:mm:ss';

This format just does not work in Firefox. It just displays the data in the default datetimeinput format.

thanks

[todd.cochranParticipant]

One other note… this only seems to be an issue when setting the cellsformat for the last column of the grid. I can move the ‘dd/MM/yyyy hh:mm:ss’ to any other column and it works just fine.

[Peter StoevKeymaster]

Hi todd,

I suggest you to check whether your datafields array has the “type” member set.

Best Regards,
Peter Stoev

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

[todd.cochranParticipant]

the datafields setting for the column in question is name : “LastWriteTime” and type : “date”

Also, this is only an issue on browsers not named Chrome.

thanks

[Peter StoevKeymaster]

Hi todd,

Ok, then could you send a sample which we can use for testing, because the provided code is not sufficient.

Best Regards,
Peter Stoev

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

[todd.cochranParticipant]

That will not be easy as we have the widgets pretty embedded in other javascript. I will get something together shortly. I basically used the source behind this as a template for my code.

thanks

[todd.cochranParticipant]

Looks like the link http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cellediting.htm?arctic
did not come through in last post

[todd.cochranParticipant]

Not sure how I missed this before but I just noticed this in the javascript console:

Uncaught TypeError: Cannot call method ‘toString’ of undefined jqxdata.js:7

not sure if it is related

And we are using 3.0.3

[todd.cochranParticipant]

Peter,
I have finally nailed down the issue. Not sure if this is a problem with the jqxGrid or not, but here is how to recreate the problem.

set the datafield to a type of date
set the columntype to datetimeinput
set the celssformat to “F”

Load the data adapter with date that have ‘-‘ in them like 2013-05-10. Firefox complains that this is an invalid date if you were to do something like the following in the initeditor function :

currDate = new Date(cellvalue);
 console.log(currDate.toDateString()); // this will print out Invalid Date

I did the following in the initeditor funciton:

                   this.currParams.columns[i]['initeditor'] =
                        function (row, cellvalue, editor)
                        {
                            var editorParams = {};
                            var newDate;

                            if(that.propTransforms.debugMode)
                            {

                                sendToLog('DEBUG',that.id,'cellvalue = ' + cellvalue,'initeditor');
                                sendToLog('DEBUG',that.id,'that.propTransforms.culture = ' + that.propTransforms.culture,'initeditor');

                            }

                                // Set Params that should fire on every init
                                // TODO: Make this configurable via JSON

                                    if( that.propTransforms.hasOwnProperty('culture') &&
                                        that.propTransforms.culture !== '')
                                    {
                                        sendToLog('DEBUG',that.id,'setting culture param','initeditor');
                                        editorParams['culture']  = that.propTransforms.culture;
                                    }

                                    editorParams['value']           = ""; // Create value param

                                    cellvalue = replaceAll(cellvalue,'-','/');  // Make sure we have '/' so Firefox is happy

                                    if(cellvalue === "" || cellvalue === undefined)
                                        editorParams.value = new Date();
                                    else
                                    {
                                        newDate = new Date(cellvalue);
                                        if(newDate.toDateString() !== 'Invalid Date')
                                            editorParams.value = newDate;
                                        else
                                        {
                                            editorParams.value = new Date();
                                            sendToLog('ERROR',that.id,'Invalid Date detected in cell in row number ' + row  +
                                                                      ' with cellvalue = ' + cellvalue,'renderWidget.initeditor');
                                        }

                                    }

                            editor.jqxDateTimeInput(editorParams);

                        };

thanks

[Peter StoevKeymaster]

Hi Todd,

That’s normal. currDate = new Date(cellvalue); with 2013-05-10 is an Invalid Date format, because it cannot be parsed by the JavaScript Date object. The String should be converted to a Date object using another approach. In this help topic, you can find how to specify the Format of your Date in the Data Source before loading it into the Grid – http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm

Best Regards,
Peter Stoev

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

[todd.cochranParticipant]

Peter,
I found the issue with the invalid dates. We are pulling data that is assigned to “source” from a database. There was a DATE_FORMAT function being used in the SQL query for one of the columns. Although the date format that was set seems to be a format that is ok for firefox it did not like it. We removed that function and stored just raw date/time data in the database and are now handling all date formatting via the widget. This resolved all the issues.

thanks

[Author]

Posts