Restrict user to select next row in jqgrid

Question

I am using jqgrid in my project.I have requirement that when user select row and click on edit button of inline toolbar control and modify any data in cell after that instead of click on Save button of inline toolbar control user click(select) any other row at that time.I want to show user message like

Wants to save/discard the modified data

if user click on Save button of message dialog then save the data otherwise discard the data.So please let me know how can I implement it.Till user don’t click on save or discard button don’t select the next row on which user click.

Which version of jqGrid you use (can use) and from which fork of jqGrid ([free jqGrid](https://github.com/free-jqgrid/jqGrid), commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7)? How exactly you use inline editing: `inlineNav`, `formatter: "actions"`, ...? The terminology "inline toolbar control" is not clear, because it will be not used in the documentation of jqGrid, free jqGrid or Guriddo jqGrid JS. — Oleg, Sep 07 '16 at 07:54
Please answer on all the questions: **which kind of edit buttons you mean. How exactly you use inline editing: `inlineNav`, `formatter: "actions"`, ...?** In general I can help you with common jqGrid functionality of with **free jqGrid** specific problems. If you use purchased commercial Guriddo then you can get support [here](http://guriddo.net/?page_id=4). I develop *alternative* fork free jqGrid, which I provide completely free of charge. — Oleg, Sep 07 '16 at 10:28
Please refer below link http://www.guriddo.net/demo/bootstrap/ and that click on Editing,Adding,Deleting row section Inline:Toolbar Control Buttons — Pankaj, Sep 07 '16 at 11:22

score 2 · Answer 1 · answered Sep 07 '16 at 11:26

First of all you should use restoreAfterSelect: false option of inlineNav (if you use inlineNav). Seconds you can use beforeSelectRow to implement the required behavior and to call saveRow or restoreRow depend on the user choice.

The simplest implementation of beforeSelectRow could be the following:

beforeSelectRow: function (rowid) {
    var $self = $(this),
        savedRowInfos = $self.jqGrid("getGridParam", "savedRow"),
        editingRowId = savedRowInfos == null || savedRowInfos.length < 1 ?
            null : savedRowInfos[0].id;

    if (editingRowId != null && editingRowId !== rowid) {
        if (confirm("Do you want to save the changes?")) {
            $self.jqGrid("saveRow", editingRowId);
        } else {
            $self.jqGrid("restoreRow", editingRowId);
        }
    }
}

I used confirm method above. You can see the working code on the demo.

Alternatively one can create asynchronous dialog using jQuery UI dialog for example. Then the code of beforeSelectRow could be the following:

beforeSelectRow: function (rowid) {
    var $self = $(this),
        savedRowInfos = $self.jqGrid("getGridParam", "savedRow"),
        editingRowId = savedRowInfos == null || savedRowInfos.length < 1 ?
            null : savedRowInfos[0].id;

    if (editingRowId == null || editingRowId === rowid) {
        return true; // allow selection
    }

    $("#dialog-confirm").dialog({
        resizable: false,
        height: "auto",
        width: 650,
        modal: true,
        buttons: {
            "Save the changes": function () {
                $(this).dialog("close");
                $self.jqGrid("saveRow", editingRowId);
                $self.jqGrid("setSelection", rowid);
            },
            "Discard the changes": function () {
                $(this).dialog("close");
                $self.jqGrid("restoreRow", editingRowId);
                $self.jqGrid("setSelection", rowid);
            },
            "Continue editing": function () {
                var tr = $self.jqGrid("getGridRowById", editingRowId);
                $(this).dialog("close");
                setTimeout(function () {
                    $(tr).find("input,textarea,select,button,object,*[tabindex]")
                        .filter(":input:visible:not(:disabled)")
                        .first()
                        .focus();
                }, 50);
            }
        }
    });
    return false; // prevent selection
}

The corresponding demo is here.

Thanks for the reply.It's working.Is there any way to check if the user modifies any data then only show a confirmation message to the user otherwise don't show any message. — Pankaj, Sep 08 '16 at 04:31
@Pankaj: You are welcome! One can implement any behavior, but the code will be longer. jqGrid don't track changes *during* inline editing, but you can compare the current values from the editing row with `savedRowInfos[0]` object, which contains the data *at the beginning* of editing. — Oleg, Sep 08 '16 at 05:10
ok.Also if user select record to edit and without saving record user enter search criteria then is it possible to show confirmation message to user? — Pankaj, Sep 08 '16 at 07:02
@Pankaj: Sorry, but I don't understand what you mean. Do you describe **editing** or **searching**? Which "search criteria" you mean? Do you still ask about selection new row during editing another row or you have new question about searchin? — Oleg, Sep 08 '16 at 07:09
I mean filter records in grid by selecting contains,equal,not equal etc.operator — Pankaj, Sep 08 '16 at 07:28
@Pankaj: Could you explain **more details** what you mean. You question was: "Restrict user to select next row in jqgrid". Thus the question is about selection of an row in jqGrid during another row is editing. The rows don't have any "filter records". If the user clicks on any other place of the page (on the filter toolbar, of the column header, outside of the grid, and so on). Depend on **the exact requirement** you can use **another callback** of jqGrid, you can register `focusin` or `focusout` event on any element on the page (or jqGrid) and to do close to the code from `beforeSelectRow`. — Oleg, Sep 08 '16 at 09:47

Restrict user to select next row in jqgrid

1 Answers1

Linked