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`. 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', conte…

Accepted Answer

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.

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

Solution

Problem

Related problems