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


Tags: css,jqgrid

Problem :

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?



Solution :

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.


    CSS Howto..

    How to add CSS to a class through jQuery?

    How to add container without destroying table

    How can I make a fluid width, fluid height, fixed header table with jQuery?

    How to blur background img - css?

    how can i add style with CSS to