2

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 ?!

Community
  • 1
  • 1
Alireza Fattahi
  • 42,517
  • 14
  • 123
  • 173

1 Answers1

2

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks @Oleg. The struts-2jquery-plugin generates the necessary jQuery statements, so we do not write any javascript ourselves. The problem is that this tag library does not assign a special class to a special column. If I could force the the plugin to do that, then I will use your recommendation for how define the CSS – Alireza Fattahi Nov 12 '14 at 08:51
  • @AlirezaFattahi: jqGrid not provide and option to assign CSS class *to the column header*. So I'm sure that struts-2jquery-plugin don't have the corresponding option too. So you *have to* assign the class using small JavaScriupt code. The most easy way is the usage of `setLabel` method like I wrote in my answer. In any way you should define more complex CSS rule on the class. The `.makeThisSmall{font-size : smaller;}` will not work because another rule `.ui-jqgrid .ui-jqgrid-view {font-size: 11px}` will overwrite it. – Oleg Nov 12 '14 at 09:00