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

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.