Hide/Show the formatter button input when the row is in edit mode -inlinenav jqgrid

Question

I want to Show the formatter button input when the row is in edit mode and Hide the button when the row is in non-edit mode. My code,

Please help me to achieve this. Thanks.

UPDATED ENTIRE CODE:

jQuery.jqgrid v4.4.4 - I installed using NuGet package manager of visual studio 2015.

//Grid View for Program Management
$(function () {
    var Role = $("#hiddenRole").val();
    $("#ProgramListGird").jqGrid({
        url: '/Home/programGrid',
        datatype: "json",
        contentType: "application/json; charset-utf-8",
        mtype: 'Get',
        colNames: ['id', 'Program', 'Unit', 'Active?', '<input type="button" style="display: inline-block; padding: 3px 12px;margin: 0px 0px;font-size: 12px;font-weight: normal;text-align: center;white-space: nowrap;border-radius: 4px;overflow:visible;border:1px solid #444444;color: #000;box-shadow: 2px 3px 1px 0px #cccccc;" id="addNewProgramId" value="Add New Program" onclick= "addNewProgram()"/>'],
        colModel: [
            { key: true, name: 'id', index: 'id', hidden: true },
            {
                name: 'ProgramDesc', index: 'ProgramDesc', editable: true, width: "580px",
                editrules: { custom: true, custom_func: programDescValidation
                }
            },
            {
                name: 'UnitID', index: 'UnitID', editable: true, edittype: 'select', width: "200px",
                formatter: 'select', editoptions: { value: "Unit1:Unit1 ; Unit2/3:Unit2/3" },
                editrules: { custom: true, custom_func: dupicateRecordValidation
                }
            },
            {
                name: 'InActive', index: 'InActive', editable: true, formatter: 'select', width: "200px",
                stype: 'select', edittype: 'select', editoptions: { value: "false:No;true:Yes" }
            },
            {             
                name: 'SaveChanges',               
                sortable: false, align: "center", classes: "button", width: "400px",
                formatter: function (cellvalue, options, rowObj) {                   
                    var cBtn = '<input type="button" id= "saveChangesId" value="Save Changes" onclick= "saveChanges(' + "'" + rowObj.id + "'" + '\)"/>'
                        return cBtn;

                }
            }
        ],
        //autoResizing: { compact: true },
        //autoResizable: true,
        pager: jQuery('#pager'),
        rowNum: 3,
        rowList: [3, 6, 9, 12],
        height: '100%',
        //shrinkToFit: false,
        //height: '300',
        width: '1328',
        //width: outerwidth,
        scrollerbar: true,
        viewrecords: true,
        caption: 'Program' + " " + Role,
        //loadonce: true,
        emptyrecords: 'No records to display',
        scrollerbar: false,
        //editurl: '/Home/programGridSave',
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            id: "0"
        },
        hidegrid: false,
        //autowidth: true,
        multiselect: false,       
        onSelectRow: function (id) {
            rowSelect(id);
        },

    }).navGrid('#pager', { edit: false, add: false, del: false, search: false, cancel: false, reload: false, refresh: false }) .jqGrid("gridResize"),
    $("#ProgramListGird").jqGrid('inlineNav', '#pager',
        {
            edit: false, add: false, save: false, cancel: false, reload: false, refresh: false, restoreAfterSelect: false, 
        });
});

CONTROLLER JSON RETURN METHOD:

List<ProgramModel> programModelList = new List<ProgramModel>();
        ProgramModel programModel = new ProgramModel();
 public JsonResult programGrid(string sidx, string sord, int page, int rows)  //Gets the todo Lists.
        {
            programModel.id = "001";
            programModel.ProgramDesc = "A";
            programModel.InActive = true;
            programModel.UnitID = "Unit1";
            programModelList.Add(programModel);

            programModel = new ProgramModel();
            programModel.id = "002";
            programModel.ProgramDesc = "B";
            programModel.InActive = true;
            programModel.UnitID = "Unit1";
            programModelList.Add(programModel);

            programModel = new ProgramModel();
            programModel.id = "003";
            programModel.ProgramDesc = "C";
            programModel.InActive = true;
            programModel.UnitID = "Unit2/3";
            programModelList.Add(programModel);

            int pageIndex = Convert.ToInt32(page) - 1;
            int pageSize = rows;
            var results = programModelList.Select(emp => new
            {
                emp.id,
                emp.InActive,
                emp.ProgramDesc,
                emp.UnitID,
            });
            int totalRecords = results.Count();
            var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
            if (sord.ToUpper() == "DESC")
            {
                results = results.OrderByDescending(s => s.id);
                results = results.Skip(pageIndex * pageSize).Take(pageSize);
            }
            else
            {
                results = results.OrderBy(s => s.id);
                results = results.Skip(pageIndex * pageSize).Take(pageSize);
            }
            var jsonData = new
            {
                total = totalPages,
                page,
                records = totalRecords,
                rows = results
            };
            return Json(jsonData, JsonRequestBehavior.AllowGet);
        }

CURRENT BEHAVIOUR:

Answer 1

I recommend you to update from very old 4.4.4 version of jqGrid to free jqGrid 4.13.5 (or 4.13.6, which I will publish today). I recommend you additionally to use formatter: "actions" (or better template: "actions") instead of the custom formatter, which you use currently. Both formatter: "actions" and inlineNav uses (in free jqGrid) the event jqGridInlineEditRow to hide/disable the buttons "save" and "delete" on start of inline editing and show/enable "save" and "cancel" instead. In the same formatter: "actions" and inlineNav register jqGridInlineAfterRestoreRow and jqGridInlineAfterSaveRow events to switch from "save" and "cancel" buttons back to "save" and "delete" after end of editing. It's really safe way to hold the buttons of formatter: "actions" and inlineNav always synchronous.

If you want to understand how one could implement the custom formatter which do the same then you can modify the definition of the column with the custom formatter. You should take in consideration the following:

1. You current code contains no name property for the column with the button. It's a bug. The unique name property, which value corresponds id requirements of HTML (for example no spaces are allowed inside), is required for every item of colModel.
2. You use class: "button" in the last column, but you mean probably classes instead of class (see the documentation). One can specify multiple classes divide by space. If you fix the property name to classes, then you will see class="button" attribute on <td> element, which contains the button. Thus you can remove style attribute of '<input type="button" ... value="Save Changes"/> and to move the inline CSS properties to the corresponding CSS rule instead

.button input {
    display: inline-block;
    padding: 3px 12px;
    margin: 0px 0px;
    font-size: 12px;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    border-radius: 4px;
    overflow: visible;
    border:1px solid #444444;
    color: #000;
    box-shadow: 2px 3px 1px 0px #cccccc;
}

1. You use currently onclick= "saveChanges(' + "'" + rowObj.id + "'" + '\)". I'd recommend you to change the code of onclick to

onclick="return saveChanges.call(this,event);"

where we initialize this of saveChanges to the button and forward Event object as the first parameter of global saveChanges function.

One can get all required Information and to find any elements in the same <td> or <tr> using relative operations. var $td = $(this).closest("td"); or better var $td = $(this).closest("tr.jqgrow>td"); is the outer cell (jQuery wrapper to DOM element, which represents the cell). To get <tr> one can use var $tr = $td.closest("tr"); or better var $tr = $td.closest("tr.jqgrow");. One can use var $tr = $td.parent(); if one used var $td = $(this).closest("tr.jqgrow>td"); before. To get rowid one can use just var rowid = $tr.attr("id"); and so on. One can really use only relative paths.

The same do formatter: "actions" internally. Thus I recommend you to use it instead of doing the same with respect of custom formatters.