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.

Answer 1

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.