struts 2 jquery grid plugin change only one column header style

Question

Is it possible to change the style of only one column heard in grid ?!

The sjg:gridColumn has a cssClass property, but setting this css will only be applied to rows under the column, not the column header.

At JQGRID - Is it possible to change the background color of HTML header text in JavaScript? I got the code as:

in your HTML page. If you want make the changes for one column only you can use setLabel method:

$("#myGrid").jqGrid('setLabel','Price', '', {'background':'red'});

or

$("#myGrid").jqGrid('setLabel','Price', '', 'myColorClass');

But I could not make it work.

Finally, as the columns headers will have unique Id, I could use below:

document.getElementById("gridtable_sampleColumn").style.backgroundColor = "#FF0000";

Well do you think there is a better way. I was looking for some thing like this:

<sjg:gridColumn name="sampleColumn" 
            cssClass="makeThisSmall" />

And in my css

.makeThisSmall{
  font-size : smaller;
}

Which did not work and only change the rows css not column header.

Also I find that the gridColumn has a formatoptions could this do what I am looking for ?!

Answer 1

There are no declarative way to set style/class of the column header for specific column (I exclude definition of the CSS rule where the id or the column name are set explicitly). So you should use setLabel to set it.

If you need to change background color then you should take in consideration that background-image have to be set to none too. Additionally you should don't forget that other CSS rules will be applied too and the rule with more specific CSS selector will win. For example the font-size in the column header will be applied because of the following rule from ui.jqgrid.css:

.ui-jqgrid .ui-jqgrid-view {
    font-size: 11px
}

which have two classes in the rule. If you want to change the value for columns having makeThisSmall class then you should define CSS rule like

.ui-jqgrid .ui-jqgrid-view .makeThisSmall {
    font-size: 8px
}

or

.ui-jqgrid-view .makeThisSmall {
    font-size: 8px
}

In any way it should be at least so complex or more complex as the CSS rule which you want to overwrite.

In the same way the background will be applied because of CSS rule which contains two classes too

.ui-widget-content .ui-state-default {
    background: ...
}

So you need define the corresponding deep (or deeper) CSS role too to be able to ovewrite it via class attribute.