Cell save when click other parts on this page.

[noctrona]

Hi,

As I practiced before with free version, when I edit a cell and click other parts of this grid or page. The cell value will save by some methods(as I remember).

But it looks like I can't achieve this behavior under the pro version.

Is that mean I need to use js to catch the mouse behavior and then save the cell value?
Do you have any good suggestion for this?


Thank you!

[paramvir]

There are 2 scenarios:

1) Click within the grid to edit other cell:

When you click to edit any other cell in the grid, quitEditMode event is invoked on exisiting old editor, thus provides you an opportunity to save the editor. It's shown in the demos how to handle quitEditMode.

For example refer to this demo & code http://paramquery.com/pro/demos/editing


2) Click outside the grid or blur the cell.

Currently pqGrid doesn't handle it. It can be handled using the code shown in this post.

http://paramquery.com/forum/index.php?topic=359.msg2583#msg2583

[noctrona]

There are 2 scenarios:

1) Click within the grid to edit other cell:

When you click to edit any other cell in the grid, quitEditMode event is invoked on exisiting old editor, thus provides you an opportunity to save the editor. It's shown in the demos how to handle quitEditMode.

For example refer to this demo & code http://paramquery.com/pro/demos/editing


2) Click outside the grid or blur the cell.

Currently pqGrid doesn't handle it. It can be handled using the code shown in this post.

http://paramquery.com/forum/index.php?topic=359.msg2583#msg2583

Hi,

As your suggestion, I try the second way in my page with the following codes:

Code: [Select]

$(document).on("blur", ".pq-editor-focus:not(.hasDatepicker)", function (evt) {

        var $grid = $(this).closest(".pq-grid");
        $grid.pqGrid("saveEditCell");
        $grid.pqGrid("quitEditMode");
    });

But when I test it, I found there will be an endless loop between this "blur" and my validation function "pqgridcellbeforesave". So when I edit a cell and click other parts then code will enter the "blur" first and then go to "pqgridcellbeforesave". If I input a value which break the validation the codes will change border color and display error message next the cell. And then will go to "blur" again.

Code: [Select]

        $("#grid_json").on("pqgridcellbeforesave", function (evt, ui) {
            var isValid = $("#grid_json").pqGrid("isValid", { dataIndx: ui.dataIndx, value: ui.newVal,rowIndx: ui.rowIndx }).valid;
            if (!isValid) {
                $("#grid_json").find(".pq-editor-focus").css({ "border-color": "red" });
                return false;
            }
        });


I try to get the border-color and check whether have red border but I still need to go to pqgridcellbeforesave function.

Do you have any suggestion?

[paramvir]

To avoid endless loop you could do the following:

1) Check at the beginning of blur event whether $grid.data("blurMode")  == true, if true return

else

2) add $grid.data( "blurMode" , true ); and at the end of blur event remove it.

$(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 );
        $grid.pqGrid("saveEditCell");
        $grid.pqGrid("quitEditMode");
        $grid.data("blurMode", false );
    });

[noctrona]

To avoid endless loop you could do the following:

1) Check at the beginning of blur event whether $grid.data("blurMode")  == true, if true return

else

2) add $grid.data( "blurMode" , true ); and at the end of blur event remove it.

$(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 );
        $grid.pqGrid("saveEditCell");
        $grid.pqGrid("quitEditMode");
        $grid.data("blurMode", false );
    });

Hi,

I try this in my codes. As I test, I input a value which break my validation on this cell, then I use "Enter" button to save this cell, when I click "Enter" button, the "pqgridcellbeforesave" will run.
But if I input same value on this cell and then click other parts on the page, the "blur" will run. I debug it, when the "$grid.pqGrid("saveEditCell");" run, the code won't go to the "pqgridcellbeforesave". So there won't be any error message with this invalid value. And the value I input won't save.

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 );
        $grid.pqGrid("saveEditCell");
        $grid.pqGrid("quitEditMode");
        $grid.data("blurMode", false );
    });

Is that possible to run validation to check the cell value by this way?

[paramvir]

If you want to see the validation error message on blur, please modify it to

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


[noctrona]

If you want to see the validation error message on blur, please modify it to

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


Hi,

It works well!
Thanks for you support!

[paramvir]

There is no need to write custom blur code as of the latest version 2.1.0. It implies that the cells are autosaved or validations run automatically whenever the cell is blurred. And it has been tested for jQueryUI controls such as datepicker and autocomplete.

Relevant API

editModel.onBlur

http://paramquery.com/pro/api#option-editModel

[noctrona]

There is no need to write custom blur code as of the latest version 2.1.0. It implies that the cells are autosaved or validations run automatically whenever the cell is blurred. And it has been tested for jQueryUI controls such as datepicker and autocomplete.

Relevant API

editModel.onBlur

http://paramquery.com/pro/api#option-editModel

Hi,

I have try it in my page and works well also for the validation.
It's a great update!

Thank you!