Help with Grid Header formatting

[Luke Kasper]

All,

I'm having an issue with my RadGrid header row.  The headers for the rows appear correctly sized, however for any screen real estate to the right of my furthest right header, I get funky results.  I attached a screenshot.

I think the fix will probably be something to the grid.css file, but I just can't seem to figure it out.  Is there something I'm missing on this?

Thank you!

[sitefinitysteve]

This public anywhere to look at?

Have you tried combing through the CSS styling on that element using Firebug?...that's where I'd start :)

[Luke Kasper]

Unfortunately, no, it's not public anywhere and I'm really limited on what I can show.

I've attached a screenshot of what IE Developer Toolbar shows for the style of the header bar.  Hopefully this helps...

[sitefinitysteve]

Ahhh, IE Developer toolbar is your problem :)

Install Firefox, then Install the Firebug addon...you'll find the bad style in minutes compared to IE Dev Bar.  Not even in the same ballpark in terms of debugging.

[Luke Kasper]

Here's the Firebug output.  Funny enough, it shows correctly in Firefox by default, but I was able to replicate it.  Is this helpful?

[Dimo]

Hello Luke,

When using scrolling with static headers, there is some empty space above the vertical scrollbar. By default it is filled with a background image, which is aligned if the header row is single-lined. Unfortunately, the background image cannot expand automatically to match any header row height.

In your case you can do one of the following:

1) Replace the background image with the one intended for double-lined header rows by setting

<telerik:RadGrid  CssClass="rgTwoLines" />

This will work if the header font size and vertical paddings have not been changed.


2) Remove the background image by setting

<telerik:RadGrid  CssClass="rgNoScrollImage" />


3) Create and apply a custom background image, adjusted to match the header row height in your specific scenario. The custom image should be set like this:

ASPX

<telerik:RadGrid  CssClass="MyCustomScrollImage" />


CSS

div.MyCustomScrollImage  .rgHeaderDiv
{
       background:0 0 repeat-x  url("...............") ;
}


Best wishes,
Dimo
the Telerik team