Author Topic: Cell save when click other parts on this page.  (Read 10648 times)

noctrona

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 82
    • View Profile
Cell save when click other parts on this page.
« on: April 18, 2014, 01:28:10 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: Cell save when click other parts on this page.
« Reply #1 on: April 18, 2014, 04:22:40 pm »
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

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 82
    • View Profile
Re: Cell save when click other parts on this page.
« Reply #2 on: April 21, 2014, 11:39:30 am »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: Cell save when click other parts on this page.
« Reply #3 on: April 21, 2014, 12:49:26 pm »
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

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 82
    • View Profile
Re: Cell save when click other parts on this page.
« Reply #4 on: April 21, 2014, 02:57:56 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: Cell save when click other parts on this page.
« Reply #5 on: April 21, 2014, 04:14:16 pm »
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

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 82
    • View Profile
Re: Cell save when click other parts on this page.
« Reply #6 on: April 21, 2014, 04:59:16 pm »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6296
    • View Profile
Re: Cell save when click other parts on this page.
« Reply #7 on: May 28, 2014, 09:35:55 am »
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

  • Pro Enterprise
  • Jr. Member
  • *
  • Posts: 82
    • View Profile
Re: Cell save when click other parts on this page.
« Reply #8 on: June 06, 2014, 11:07:41 am »
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!