ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: angelahlp on October 01, 2015, 01:26:42 am

Title: default date with datepicker when adding row
Post by: angelahlp on October 01, 2015, 01:26:42 am

I'm trying to set a default value for a datepicker field so that when a new row is created it autofills with the default. I've tried a couple of things, but the date field with the datepicker is always blank when a new record is created.

This is the addrow button:

                    { type: 'button', icon: 'ui-icon-plus', label: 'Add Inject', listener:
                        { "click": function (evt, ui) {                   
             var rowData = { griddate: "3/10/15" };
                            $grid.pqGrid("addRow", { rowData: rowData, rowIndxPage: 0 });
                            $grid.pqGrid("setSelection", { rowIndxPage: 0 });
                            $grid.pqGrid("editFirstCellInRow", { rowIndxPage: 0 });
                        }
                        }
                    },

This is the colmodel definition:
             { title: "Date", minWidth: 30, width: 75, dataIndx: "griddate", dataType: 'date',
                 editor: {
                     type: 'textbox',
                     init: dateEditor
                 },
                 render: function (ui) {
                     //return "hello";
                     var cellData = ui.cellData;
                     if (cellData) {
                         return $.datepicker.formatDate('m-d-y', new Date(cellData));
                     }
                     else {
                         return "";
                     }
                 },
                 validations: [
                       { type: 'regexp', value: '^([0]?[1-9]|[1][0-2])[./-]([0]?[1-9]|[1|2][0-9]|[3][0|1])[./-]([0-9]{4}|[0-9]{2})$', msg: 'Not in m/d/yy format' },
                   ]   
            },

Title: Re: default date with datepicker when adding row
Post by: paramvir on October 01, 2015, 11:32:17 pm

I tested your code, it works fine when a new record is added.

I suspect it has something to do with  init: dateEditor. Have you added this option dateFormat: "m-d-y" in the dateEditor too?

http://api.jqueryui.com/datepicker/#option-dateFormat

Please also include the code for dateEditor.

Title: Re: default date with datepicker when adding row
Post by: angelahlp on October 03, 2015, 12:16:32 am

The dateeditor that I'm using is straight from the "Editors and Validations" demo. I tried putting the dateFormat option in the editor, but maybe I'm not doing it right as it still didn't work.

        var dateEditor = function (ui) {
            var $inp = ui.$cell.find("input"),
                $grid = $(this),
                validate = function (that) {
                    var valid = $grid.pqGrid("isValid", {
                        dataIndx: ui.dataIndx,
                        value: $inp.val(),
                        rowIndx: ui.rowIndx
                    }).valid;
                    if (!valid) {
                        that.firstOpen = false;
                    }
                };

            //initialize the editor
            $inp
            .on("input", function (evt) {
                validate(this);
            })
            .datepicker({
                changeMonth: true,
                changeYear: true,
                showAnim: '',
                onSelect: function () {
                    this.firstOpen = true;
                    validate(this);
                },
                beforeShow: function (input, inst) {
                    return !this.firstOpen;
                },
                onClose: function () {
                    this.focus();
                }
            });
        }

Title: Re: default date with datepicker when adding row
Post by: paramvir on October 05, 2015, 11:15:44 pm

dateEditor works fine.

1. Do the fields other than date field work fine?

2. Is the row editable? Have you tried to pass checkEditable: false in addRow:

$grid.pqGrid("addRow", { rowData: rowData, rowIndxPage: 0, checkEditable: false });

Please share a complete test case if still facing issues.