Question

I’m using jqGrid 4.3.2 with the inlineNav option. All editing on the grid is done locally using loadonce: true and clientArray. When the user finishes editing, they click a save button on the form and the entire grid is posted to the server. This works great, for the most part, but I’ve run into an oddity. If the user adds a new row and then clicks the save button before hitting enter to confirm the edit or deselecting the newly added row, the add button on the inline navigator remains disabled even after calling saveRow before posting and reloading. I’ve tried resetSelection and restoreRow after the saveRow call, but neither of these work. My save code:

$("#submitButton").click(function () {
    $("#theGrid").jqGrid('saveRow', $("#selectedRowId").val(), false, 'clientArray');
    if (!ValidateGridData())
        return false;
    var rowData = $("#theGrid").jqGrid('getRowData');
    var dataToSend = JSON.stringify(rowData);
    $.ajax({
        url: '@Url.Action("UpdateGridData")',
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        data: dataToSend,
        dataType: 'json',
        async: false,
        success: function (data, textStatus, jqXHR) {
            $("#theGrid").jqGrid('setGridParam', { datatype: 'json' });
            $("#theGrid").trigger('reloadGrid');
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert('Error saving data: ' + textStatus + " " + errorThrown);
        }
    });
    return true;
});

Is there a way I can convince the inline navigator that the new row is saved and the user can add more rows?

Answer 1

The buttons added in the navigator by the inlineNav method has ids which constructed from the grid id and the corresponding suffix:

• Add: gridId + “_iladd” (for example “list_iladd”)
• Edit: gridId + “_iledit” (for example “list_iledit”)
• Save: gridId + “_ilsave” (for example “list_ilsave”)
• Cancel: gridId + “_ilcancel” (for example “list_ilcancel”)

To enable the button you should remove 'ui-state-disabled' CSS class:

var gridId = "list";
$("#" + gridId + "list_iladd").removeClass('ui-state-disabled');

To disable the button one can use .addClass('ui-state-disabled') instead.

Additionally I don’t recommend you to use any inline editing methods like saveRow directly. In the case you will probably not have the problem which you try to solve. Look at the code from the answer. It defines editingRowId and myEditParam as

var $grid = jQuery("#list"),
    editingRowId,
    myEditParam = {
        keys: true,
        oneditfunc: function (id) { editingRowId = id; },
        afterrestorefunc: function (id) { editingRowId = undefined; }
    };

and then use inlineNav with myEditParam parameter:

$grid.jqGrid('inlineNav', '#pager',
    { edit: true, add: true, editParams: myEditParam,
        addParams: {addRowParams: myEditParam } });

In the case you can be sure that editingRowId get you the id of the current editing row or undefined if no row are editing. So you can use $(gridIdSelector + "_iledit").click(); instead of editRow to edit the current selected row. In the same you can use setSelection if needed and simulate click on any other inline editing navigator buttons.

UPDATED: If you need you can still combine calls of saveRow inside of onSelectRow, but you can first use the variable editingRowId and seconds use myEditParam which will be common for all editing ways which you use:

onSelectRow: function (id) {
    var $this = $(this);
    if (editingRowId !== id) {
        if (editingRowId) {
            // save or restore currently editing row
            $this.jqGrid("saveRow", editingRowId, myEditParam);
            // or $this.jqGrid("restoreRow", editingRowId, myEditParam);
        }
        $this.jqGrid("editRow", editingRowId, myEditParam);
    }
}

If you need some other options of inline editing methods you can include there in the myEditParam. You will see that editingRowId is much better to use as lastSel variable which you find in the most inline editing examples.