jqGrid with inlineNav: is there a way to force the Add button to re-enable?

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. Whe

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.