CooperAtlas CooperAtlas - 11 months ago 72
jQuery Question

Block free-jqGrid from setting active class on table row

I am using free-jqgrid 4.13.1 with

guiStyle: bootstrap
. In my jqgrid, it always adds the "active" class when the mouse moves over a row. I require special CSS rules to be unaffected while the user is using the grid. So how do I make my jqgrid not add the "active" class to each row as the user mouses over them?

Answer Source

I suppose that you use guiStyle: "bootstrap" to use Bootstrap CSS in free jqGrid (see here). In the case the class "active" will be added on hover the row.

You can use hoverrows: false to change the behavior.

UPDATED: The settings of guiStyle: "bootstrap" includes the usage of table-hover option. Thus hoverrows: false is recommended option in case of usage guiStyle: "bootstrap". See the part of free jqGrid code for details. On the other side if you want to remove hover effect from jqGrid then you should create custom Bootstrap GUI style without table-hover class and uses the style.

The demo demonstrates the approach. It defines bootstrapNoHover GUI style using

$.jgrid.guiStyles.bootstrapNoHover = {
    baseGuiStyle: "bootstrap",
    hTable: "table table-condensed table-bordered",
    subgrid: {
        legacyTable: "table table-condensed table-bordered"
    grid: "table table-condensed table-bordered",
    gridFooter: "table table-condensed table-bordered"

and then uses guiStyle: "bootstrapNoHover" instead of guiStyle: "bootstrap".