I currently have a small problem when trying to set a background image for webgrid headers using CSS. I am using WebGrid 7.3 and have set a CSS class for the HeaderStyleDefault which sets a blue gradient image (as seen on the attached image) as the background image for the headers. This applied the image but also applied it to the row selectors and the acual data rows in the grid. I wanted the same image on the row selectors so this is not a problem, however I did not want to image on the data rows and so set up a new CSS class and assigned it to RowStyleDefault. This successfully removed the image from the data rows however it also seems to have removed it from the small square area in the top left corner of the grid (between the headers and the row selectors). This obviously doesnt look good but I have been sofar unable to find how to get the image to apply to this square without affecting the data rows.
Any help would be greatly appreciated.
Hello,
You need to check a couple of things. The WebGrid has a style inherritance hierarchy that could lead to styles being overwritten if defined in the wrong order.
Check the following link for the style inherritance hierarchy and check that your styles are in the correct order:
http://help.infragistics.com/Help/NetAdvantage/NET/2008.2/CLR3.5/html/WebGrid_Style_Inheritance.html
If nothing you defined is being overwritten, what you need should just be the header styles and row selector styles. You shouldn't need to define a row style explicitly if you don't need it. You may have to target the header of the row selector directly with a CSS selector for the header.
Something really strange must be going off here. It appears that in my case the RowStyle is being overridden by the HeaderStyle. If I declare the RowStyle before the HeaderStyle then I get a grid full of blue rows (the blue image being the one declared for the header background) whereas if I declare the HeaderStyle first and rthen the RowStyle I get correctly coloured rows but with the problem shown in my first message.
According to the inheritance hierarchy the header should inherit from the row (not the other way round) so what I am experiencing should in theory be impossible.
In case it helps, the build I'm using is 7.3.20073.1043 . I don't suppose there are any known issues with this build that would be fixed if I upgrade.
Your styles should be defined as follows:
.row {
}
.rowalt {
.header {
Do you have it in this order? In addition, check the OptimizeCssClassName property and tell me what it is set to.