Cell save about datepicker

[noctrona]

Hi,

I have a column need to let user choose date from a calendar. And I check demo found the datepicker function. So I add it in my page. Please have a look with my codes:

The column:

Code: [Select]

{ title: "Start Date", width: 85,align: "center", dataIndx:"startDate",editor: {type: dateEditor}, validations: [......]}

Then "dateEditor" function:

Code: [Select]

var dateEditor = function(ui) {
        var $cell = ui.$cell,
                rowData = ui.rowData,
                dataIndx = ui.dataIndx,
                cls = ui.cls,
                dc = $.trim(rowData[dataIndx]);
        $cell.css('padding', '0');
        var $inp = $("<input type='text' id='" + dataIndx + "' name='" + dataIndx + "' class='" + cls + " pq-date-editor' style='position: relative; z-index: 100;border: 3px solid rgba(0,0,0,0);'/>")
                .appendTo($cell)
                .val(dc).datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: "yy-mm-dd",
            firstDay: 1,
            onClose: function() {
                $inp.focus();
            }
        });
    };

For the moment this date function works well and I also add some validation to check the value.
But I post before, for now, I want to the cell save value automatically when user click other parts on the page. And this function works well for other cell, but for this column which use the "dateEditor" user still need to use "Enter" or "Tab" button to save value.
I debug my js, I use double click to edit cell.
When I double click this cell, the calendar will pop up and I choose a day, then click other parts in the grid or out of grid. My function set on "blur" didn't be invoke.

Code: [Select]

$(document).on("blur", ".pq-editor-focus:not(.hasDatepicker)", function (evt) {
        var $grid = $(this).closest(".pq-grid");
        if ($grid.data("blurMode")) {
            return;
        }
        $grid.data("blurMode", true);
        if ($grid.pqGrid("saveEditCell")) {
            $grid.pqGrid("quitEditMode");
        }
        $grid.data("blurMode", false);
});

Then I check our demo again, for example the pro demo "Editors & Validations", when I choose a date and click other part on this gird, the date can be save.

So do I need to add some other codes for this?



And one more thing. As I test, when I enter edit model for a cell(type is integer or float), then will be an zero(0) display on the cell, the cursor will after the zero. When I use chrome, I can input my number directly, when I save the cell the zero will be ignore automatically.

Code: [Select]

e.g. (| is the cursor)
enter edit model:   0|
input 200  :           0|200
save it :               200

But when I use it on IE8, I found I need to delete the default zero number manually, and the cursor at the front of the zero. If I don't delete this zero. The value when I save will be wrong.

Code: [Select]

e.g. (| is the cursor)
enter edit model:   |0
input 200 :            200|0
save it :                2000


So is there some attribution can remove this zero value or I need to handle them manually?

[paramvir]

1) blur method doesn't work well with datepicker.

It would be better to stick with quitEditMode as demonstrated in demo. http://paramquery.com/pro/demos/editing_custom

Code: [Select]

grid1.on("pqgridquiteditmode", function (evt, ui) {
        //exclude esc and tab           
        if (evt.keyCode != $.ui.keyCode.ESCAPE && evt.keyCode != $.ui.keyCode.TAB) {
            grid1.pqGrid("saveEditCell");
        }
    });

2) It could be fixed with editor : { select : true } which would cause selection of whole text in the editor.

[noctrona]

1) blur method doesn't work well with datepicker.

It would be better to stick with quitEditMode as demonstrated in demo. http://paramquery.com/pro/demos/editing_custom

Code: [Select]

grid1.on("pqgridquiteditmode", function (evt, ui) {
        //exclude esc and tab           
        if (evt.keyCode != $.ui.keyCode.ESCAPE && evt.keyCode != $.ui.keyCode.TAB) {
            grid1.pqGrid("saveEditCell");
        }
    });

2) It could be fixed with editor : { select : true } which would cause selection of whole text in the editor.

Hi,

Thanks for you answer.
1) We try this in my page. 
By these codes, as I test, if I want to save the date I choose I need to click grid data content, then the date can be save.(like click other cell on the grid or grid header).

But if I only have less records on the grid, there will be a blank between the last record and the grid bottom. So I click this part the date can't be save.

2)I change the attribute like this and works well now.

Code: [Select]

editor: {type: 'textbox', select : true}


Thank you!

[paramvir]

Currently datepicker value can be saved only by using enter, tab or via quitEditMode and it has issues when used along with blur.

We are looking into other options or workarounds and I would let you know as soon as one is found.

[noctrona]

Currently datepicker value can be saved only by using enter, tab or via quitEditMode and it has issues when used along with blur.

We are looking into other options or workarounds and I would let you know as soon as one is found.

Got it. Thanks for your help!