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];

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 set the Border Color of a Flex Spark Button with CSS

    How to prevent the CSS `:before` text being editable while the `div` itself is editable?

    How do I achieve this particular hover effect?

    how to see background color of div when if move on image

    How to get border radius and gradient background working together in IE 9

    How to improve page loading which includes css and jquery files

    Angularjs hide and show according to screen size responsive

    css: how to center box div element directly in center?

    How can I make the parent div draggable

    CSS Grid Layout Module Level 1 - How long does it usually take from candidate recommendation to final spec?

    How to add css to modules in prestashop 1.5?

    How to display shopping cart at the right of page

    How to blur a banner photo in CSS Style?

    how to override the specific style of spans in a div [span in a span ] using css or jquery?

    How can I make my web page load faster?

    How to make css jquery autofit navigation?

    li:before{ content: “■”; } How to Encode this Special Character as a Bullit in an Email Stationery?

    How to call static block with styles.css

    How can I make my icon
    s show up next to each other, rather than underneath each other?

    How to add a new CSS class to a Link Badge if the value is 0?

    How to include css files in JSP page struts2?

    How to absolute position imageless corners with css

    How to fix and re-arrange fixed position divs

    How to transform Ruby hash to CSS rule?

    CSS how to place an image to the right of variable width text on roll over?

    How to style using d3's .style() method instead of using CSS in style tags for .axis path {}?

    Shows a dropdown element with jQuery

    How to remove
      unordered list's last
    • list item's border using css without changing anything in HTML code?

    How to create a lightbox like this [closed]

    How do you fade horizontal text into a vertical gradient?