jqGrid: How to dynamically change the value of cell which has formatter

Question

I have a jqGrid which has an action column containing the buttons of "edit" and "delete". The requirement is when the user click the "Delete" button in the action column. The row is not deleted, but marked to be deleted. Thus, my implementation is to remove the "edit" button and replace "delete" button with "undeleted" button. Following are the code

 jQuery('#grid').jqGrid({
     datatype: 'local',
     colNames:[
         'action',
          ... other columns
     ],
     colModel:[
        { name:'action', formatter:actionLink, align:'center', sortable:false, width:150},
        ... other columns 
     ],
     height: 'auto',
     width: 935
});

function actionLink(cellvalue, options, rowObject) {
    var editImg = '<img width="16" height="16" border="0" alt="Edit" src="${contextPath}/images/edit.png">';
    var deleteImg = '<img width="16" height="16" border="0" alt="Delete" src="${contextPath}/images/delete.png">';
    var editLink = '<a href="javascript:void(0)" onclick="edit(' + options.rowId + ');">' + editImg + '</a>';
    var deleteLink = '<a href="javascript:void(0)" onclick="delete(' + options.rowId + ');">' + deleteImg + '</a>';
    return editLink + ' ' + deleteLink;
}

function delete(rowId) {
   var selectedObj = jQuery('#rid').jqGrid('getRowData', rowId);
   var unDeleteImg = '<img width="16" height="16" border="0" src="${contextPath}/images/arrow_undo.png" />';
   selectedObj.action = '<a href="javascript:void(0)" onclick="unDelete(' + rowId + ');">' + unDeleteImg + '</a>';
   jQuery('#grid').jqGrid('setRowData', rowId, selectedObj);
}

The action column still display "edit" and "delete" buttons rather than just "undo" button. What did I do wrong? Is it the problem of formatter function actionLink?

user1089766 user1089766 · Accepted Answer · 2014-11-07T13:21:36

you can access the jqgrid row like below code

  for (var i = 0; i < gridData.length; i++) {
            var row = $("#grdGridView").jqGrid('getRowData', gridData[i]);
            var item = gridData[i]["chkSelect"];
            jQuery("#grdGridView").jqGrid('setCell', i + 1, 2, '', { color: 'black' });
            if ($(item).prop("checked") == true) {
                var o = {};

                o.GridViewkey = gridData[i]["GridViewkey"];
                o.GridViewDesc = gridData[i]["GridViewDesc"];
                o.LocationStatus = gridData[i]["LocationStatus"];
                o.EffectiveDate = $(gridData[i]["EffectiveDate"]).prop("value");
                o.InactivationDate = $(gridData[i]["InactivationDate"]).prop("value");
                if (!validatedt(o.EffectiveDate) && o.EffectiveDate != "" && !validatedt(o.InactivationDate) && o.InactivationDate != "") {
                    msg = msg + "[" + o.GridViewDesc + "]: Date is invalid. <br/>";
                    jQuery("#grdGridView").jqGrid('setCell', i + 1, 2, '', { color: 'red' });
                }
                else if (!validatedt(o.EffectiveDate) && o.EffectiveDate != "") {
                    msg = msg + "[" + o.GridViewDesc + " Effective Date]: Date is invalid. <br/>";
                    jQuery("#grdGridView").jqGrid('setCell', i + 1, 2, '', { color: 'red' });
                }
                else if (!validatedt(o.InactivationDate) && o.InactivationDate != "") {
                    msg = msg + "[" + o.GridViewDesc + " Term Date]: Date is invalid. <br/>";
                    jQuery("#grdGridView").jqGrid('setCell', i + 1, 2, '', { color: 'red' });
                }
                o.rid = i + 1;

                params[i] = o;
            }
        }

jqGrid: How to dynamically change the value of cell which has formatter

1 Answers