Question

When the user clicks add and hits the reload button without saving the row, the Add button is not restored. The Save & Cancel buttons are still active. How do I cancel inline row editing manually? Or is there a way to find these buttons so I can hide them?

Answer 1

To enable the button added by inlineNav you need to remove the class 'ui-state-disabled' (call .removeClass('ui-state-disabled')). To disable the button you need to add the class 'ui-state-disabled' (call .addClass('ui-state-disabled')). To identify (to select with respect of jQuery) the buttons you need to know that the id of the buttons will be constructed from the grid’s id and the suffix constructed based on the button name: "_ilsave", "_ilcancel", "_iladd", "_iledit". For example if the id of the grid is "list" then the id of the save button will be "list_ilsave".

To reset the state the buttons before or after refreshing the grid you can use afterRefresh or beforeRefresh callbacks of navGrid (see the documentation) or to do this inside of loadComplete callback. For example

loadComplete: function () {
    var idSelector = "#" + $.jgrid.jqID(this.id);
    $(idSelector +"_ilsave").addClass('ui-state-disabled');
    $(idSelector +"_ilcancel").addClass('ui-state-disabled');
    $(idSelector +"_iladd").removeClass('ui-state-disabled');
    $(idSelector +"_iledit").removeClass('ui-state-disabled');
}

Alternatively you can use showAddEditButtons instead of all the above calls:

loadComplete: function () {
    $(this).jqGrid("showAddEditButtons");
}

I included the above code mostly for the case that you need to do other kind of “enabling” or “disabling” of the buttons.