How do I remove a CSS class from a jqGrid cell?

Question

It is possible to add a CSS class to a jqGrid cell using the setCell method as below.

grid.setCell(rowId, "ColumnName", "", "my-style-class");

Considering that this method appears only able to add CSS classes, how can one remove a CSS class from a jqGrid cell?

Answer 1

One can't remove the call class with a standard jqGrid method. So you have to do this manually:

var iCol = getColumnIndexByName(grid,"ColumnName"),
    tr = grid[0].rows.namedItem(rowid), // grid is defined as grid=$("#grid_id")
    td = tr.cells[iCol];
$(td).removeClass("my-style-class");

where getColumnIndexByName is a simple function which get the column index by the column name:

var getColumnIndexByName = function(grid,columnName) {
    var cm = grid.jqGrid('getGridParam','colModel');
    for (var i=0,l=cm.length; i<l; i++) {
        if (cm[i].name===columnName) {
            return i; // return the index
        }
    }
    return -1;
}

See the demo here.

UPDATED: Free jqGrid have iColByName internal parameter which can be used instead of getColumnIndexByName function. The iColByName parameter will be filled by free jqGrid internally and it will updated by reodering of columns. So it's safe to use

var p = grid.jqGrid("getGridParam"), // get the reference to all parameters
    iCol = p.iColByName["ColumnName"], // get index by column name
    cm = p.colModel[iCol]; // item of "ColumnName" column

The way is very simple and it works very quickly. One should take in consideration that the feature is included in free jqGrid after publishing of free jqGrid 4.8. So one have to download the latest sources from GitHub or to use at least free jqGrid 4.9-beta1 to have the feature.

Answer 2

One can easily add new class to a cell by removing the old class as:

$("#gridname").removeClass('oldclass')
              .setCell(rowId,'column_name','','newclass');

Where rowId is id of the row containing corresponding cell and can be obtained as:

var ids = $("#gridname").jqGrid('getDataIDs');