DateTimeInput editor in a grid

[todd.cochranParticipant]

I have a DateTimeInput column type in a grid that is using a custom editor.

 // check for date columns in columnsDef
            for(var i = 0; i < this.currParams.columns.length; i++ )
            {

                if(this.currParams.columns[i].columntype === "datetimeinput")
                {
                    // Adding validation to match example
                    this.currParams.columns[i]['validation'] =
                        function (cell, value)
                        {
                            var rtnVal = true;

                            if (value == "")
                                rtnVal =  { result: false, message: "Please enter a valid date" };

                            var year = value.getFullYear();
                            if (year <= 2000) {
                                rtnVal =  { result: false, message: "Date should be after 2000" };
                            }

                            return rtnVal;

                        };

                    // end validation
                    this.currParams.columns[i]['createeditor'] =
                        function (row, cellvalue, editor)
                        {
                            var editorParams = {};

                                if(that.propTransforms.debugMode)
                                {
                                    sendToLog('DEBUG',that.id,'that.propTransforms.culture = ' + that.propTransforms.culture,'createeditor');
                                }

                            // Set Params that should fire on every init

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

                            editorParams['value'] = new Date();

                            editor.jqxDateTimeInput(editorParams);
                        };

                    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 !== '')
                                        editorParams['culture']  = that.propTransforms.culture;

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

                                    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);

                        };

                } // end if datetimeinput

            } // end for

When doing this, I am unable to use the keyboard to type in the date. I click on the input box, hit any number key and it sets it to 0. However, if I just use a standalone dateTimeInput, everything works fine

[DimitarParticipant]

Hello todd.cochran,

The code you have provided is out of context. What function is it part of?

Nevertheless, this is not the intended way of setting the column callback functions (validation, initeditor, etc.) Please check out the demos Editing and Customized Editors to see how to implement them properly.

Best Regards,
Dimitar

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

[todd.cochranParticipant]

Dimitar,
Sorry for the confusion. We have a set of “wrapper” scripts that act as an abstraction layer between a custom designer we have to allow non-developers to design pages and interact with the underlying jqWidgets. The code I presented is how we determine what type of column it is and to setup the editors as needed.

The code actually generates an object that contains the equivalent of what is sine in the Customized example:

createeditor: function (row, column, editor) {
                            // assign a new data source to the combobox.
                            var list = ['Stuttgart', 'Rio de Janeiro', 'Strasbourg'];
                            editor.jqxComboBox({ autoDropDownHeight: true, source: list, promptText: "Please Choose:" });

However, if I remove the custom editors I still have the same issue of being unable to use the keyboard , other than the up and down arrows, to update the date and times.

thanks

[Peter StoevKeymaster]

Hi guys,

I think that the problem is that you do not add reference to globalize.js. globalize.js is not part of jqx-all.js(if you use it), because globalize.js is not part of jQWidgets, but is used by jQWidgets.

Best Regards,
Peter Stoev

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

[todd.cochranParticipant]

There is a ref to globalize.js Not sure what that has to do with anything. As I only use this culture param when needed. I have removed all the code I showed in the initial post and the same problem remains. When I do the dateTimeInput on its own, everything works fine. The only issue is when I embed it in a table. Is there any other reason as to why hitting any key in a datetimeinput just sets it to 0? Again, the up/down arrows scrolls through as well

[Peter StoevKeymaster]

Hi todd,

No, there isn’t other reason. In our demos the DateTimeInput editor’s keyboard navigation works correctly so I suggest you to check the differences between your page and our demo.

Best Regards,
Peter Stoev

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

[todd.cochranParticipant]

Peter,
I took a look at my references and the globalize reference had a typo. I corrected that and it now works. Seems odd to me that this script is required for this to work.

Thanks for the help

[Peter StoevKeymaster]

Hi todd,

It is required, because globalize.js is used for Date Formatting & Localization.

Best Regards,
Peter Stoev

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

[Author]

Posts