Show save cancel icon on inlinenav in jqgrid

Question

I have implementd a jqgrid with inline add, edit, delete. When I add a new row, the newly added row has an edit icon and a cancel icon, whereas the save icon is on the toolbar next to the add.

Is there a way to specify that the newly added row have a save and cancel icon instead of having the edit icon?

I have find the same question on this link

here

But unable to find where to add the function specified there.

Here is my code

function BindGridView(columnNames, colModel) {
        colModel = [
                { index: 'Id', name: 'Id', align: 'center', 'hidden': true, editable: false },

                {
                    index: 'Value', name: 'Value', editable: true, editrules: { custom: true, custom_func: myvaluecheck },
                    sorttype: function (cell) { if (cell == 'Value') return '1'; }
                },
                 { index: 'Name', name: 'Name', align: 'center', editable: true, editrules: { custom: true, custom_func: CheckName } },
                {
                    name: 'myac', width: 80, fixed: true, sortable: false, resize: false,
                    formatter:  inlineNavAction(cellvalue, options, rowObject, (options.rowid != 'new_row')),
                    formatoptions: {
                        keys: true,
                        onEdit: null,
                        onSuccess: null,
                        onError: null,
                        afterSave: null,
                        afterRestore: null,
                        delOptions: {
                            onclickSubmit: function (rp_ge, rowid) {
                                var selRowId = $('#dataList').jqGrid('getGridParam', 'selrow');
                                var celValue = $('#dataList').jqGrid('getCell', selRowId, 'Id');
                                Delete(celValue);
                                rp_ge.processing = true;
                                $("#dataList").delRowData(rowid);
                                $("#delmod" + grid[0].id).hide();
                                if (grid[0].p.lastpage > 1) {
                                    grid.trigger("reloadGrid", [{ page: grid[0].p.page }]);
                                }
                                return true;
                            },
                            processing: true
                        }
                    }
                }];
        var gridimgpath = '/Scripts/jqgrid/themes/redmond/images';
        var gridDataUrl = '@Url.Action("GetGridData", "Grid")';
        var grdurl = gridDataUrl + "?lookupId=" + guid();
        $("#dataList").jqGrid('GridUnload');
        jQuery("#dataList").jqGrid({
            formatter: {
                number: { decimalSeparator: ".", thousandsSeparator: " ", decimalPlaces: 2, defaultValue: '0.00' }
            },
            url: grdurl,
            datatype: "json",
            colNames: columnNames,
            colModel: colModel,
            autowidth: true,
            width: 'auto',
            height: 'auto',
            rowNum: 10,
            rowList: [10, 20, 30],
            scrolling: true,
            shrinktofit: true,
            pager: '#pager',
            sortname: 'Name',
            rownumbers: false,
            rownumWidth: 30,
            viewrecords: true,
            sortorder: "desc",
            multiselect: false,
            imgpath: gridimgpath,
            editurl: "/Grid/PerformCRUDAction",
            inlineData: {
                myParam: function () {
                    var selRowId = $("#dataList").jqGrid('getGridParam', 'selrow');
                    getActualRowData(selRowId);
                    var jsonOfLog = JSON.stringify(myKeyValuePairs);
                    return jsonOfLog;
                }
            },
            beforeShowForm: function (id) {
                alert("deleted");
            },
            onSelectRow: function (id) {
                if (id && id !== lastSel) {
                   // debugger;
                    $(this).jqGrid('restoreRow', lastSel);
                    $(this).jqGrid('editRow', id, true, null, null, null, {
                        myNextParam: function () {
                            alert("extraparam of 'editRow' is calling!!!");
                            return "Fine";
                        }
                    });
                    lastSel = id;
                }
            },

        }).navGrid("#pager",
    { refresh: false, add: false, edit: false, search: false, del: false },
        {}, // settings for edit
        {}, // settings for add
        {}, // settings for delete
        {} // Search options. Some options can be set on column level
 );
        //{ refresh: false, add: false, edit: false, del: false },
        $("#dataList").jqGrid('inlineNav', '#pager',
           {
               refresh: false,
               edit: false,
               add: true,
               del: false,
               search: false,
               //edittext: "Edit",
               //addtext: "Add",
               //save: false,
              // cancel: false,
               //addtext: "Add",
               //savetext: "Save",
               // canceltext: "Cancel",

               addicon: "ui-icon-plus"//,
           });

    }

    inlineNavAction = function(cellvalue, options, rowObject, isSavedRow){
        if(isSavedRow !== true){
            var rowid = options.rowId;
            var ocl = "id='jSaveButton_"+rowid+"' onclick=jQuery.fn.fmatter.rowactions.call(this,'save'); onmouseover=jQuery(this).addClass('ui-state-hover'); onmouseout=jQuery(this).removeClass('ui-state-hover'); ";
            var str = "<div title='"+$.jgrid.edit.bSubmit+"' style='float:left;' class='ui-pg-div ui-inline-save' "+ocl+"><span class='ui-icon ui-icon-disk'></span></div>";
            ocl = "id='jCancelButton_"+rowid+"' onclick=jQuery.fn.fmatter.rowactions.call(this,'cancel'); onmouseover=jQuery(this).addClass('ui-state-hover'); onmouseout=jQuery(this).removeClass('ui-state-hover'); ";
            str += "<div title='"+$.jgrid.edit.bCancel+"' style='float:left;margin-left:5px;' class='ui-pg-div ui-inline-cancel' "+ocl+"><span class='ui-icon ui-icon-cancel'></span></div>";
            return "<div style='margin-left:8px;'>" + str + "</div>";

        }else{
            return $.fn.fmatter.actions(cellvalue, options, rowObject);
        }   

    } 

When I click on 'Add' new generated row shows the button 'Edit' & 'Delete', when I clicked on 'Edit' , button turns to 'Save' and 'Cancel'. And now click on this Cancel (inline) new row disappears but Add button not visible.

Answer 1

Change this line

formatter:  inlineNavAction(cellvalue, options, rowObject, (options.rowid != 'new_row')),

to

formatter:  function(cellvalue,options,rowObject) {
    return inlineNavAction(cellvalue,options,rowObject, (options.rowId!='new_row'));
 }