Selected row background color

Question

I'm using jqgrid with jquery-ui 'smoothness' theme, unfortunately with this theme the selected row background color is too light, I'm trying to change the background color to make it more visible. I've tried changing ui-state-highlight in css (with !important override) but this does not work. Is there a CSS way to do this or perhaps a jqgrid custom formatter is the way to go?

Solution 1

The class ui-state-highlight uses the background CSS attribute. So a small trick is to use background instead of background-color to remove the background image. For example

.ui-state-highlight { background: yellow !important; }

see live here.

UPDATED: It's not necessary to use !important. It's enough to specify a more specific rule like

.ui-jqgrid-btable .ui-state-highlight { background: yellow; }

or

.ui-jqgrid .ui-state-highlight { background: yellow; }

Solution 2

jQuery('#jqGrid').find('.ui-state-highlight').css('background', 'skyblue');

You can add like this in your jquery file

Comments

[Jeff]

Thanks, that's exactly what I was looking for!