JqGrid with inlineNav: is there a way to force the "Add" button?

Question

I am using jqGrid 4.3.2 with the inlineNav option. All changes to the grid are performed locally using loadonce: true and clientArray . When the user finishes editing, they click the save button on the form, and the entire grid is sent to the server. This works fine, for the most part, but I ran into weirdness. If the user adds a new line and then presses the "Save" button before pressing "Enter" to confirm the change or deselect the new added line, the add button of the built-in navigator remains disabled even after calling saveRow before sending and rebooting. I tried resetSelection and restoreRow after calling saveRow , but none of them 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 to convince the built-in navigator that a new line will be saved and the user can add more lines?

Answer 1

The buttons added in the navigator using inlineNav have identifiers that are built from the grid identifier and the corresponding suffix:

• Add: gridId + "_iladd" (for example, "list_iladd")
• Edit: gridId + "_iledit" (e.g. "list_iledit")
• Save: gridId + "_ilsave" (for example, "list_ilsave")
• Cancel: gridId + "_ilcancel" (for example, "list_ilcancel")

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

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

To disable a button, you can use .addClass('ui-state-disabled') .

In addition, I do not recommend you use any built-in editing methods, such as saveRow . In case you probably will not have the problem you are trying to solve. Look at the answer code. 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 the myEditParam parameter:

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

In this case, you can be sure that editingRowId will get the identifier of the current edit line or undefined if no line is being edited. This way you can use $(gridIdSelector + "_iledit").click(); instead of editRow to edit the currently selected row. In this case, you can use setSelection , if necessary, and simulate a click on any other built-in navigation edit buttons.

UPDATED . If you need to, you can still combine saveRow calls inside onSelectRow , but first you can use the editingRowId variable and use the seconds myEditParam , which will be common for all the editing methods that 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 other variations of the built-in editing methods, you can include them in myEditParam . You will see that editingRowId much better used as the lastSel variable, which you will find in most built-in editing examples.