RadGrid with Scrollbar and Header Text that wraps causes formatting issue

[john]

I have a RadGrid which has a scrollbar on it, and also a Header Text on one column which is long enough to wrap onto two lines. This causes a strange display problem in the top right corner of the RadGrid, above the scroll bar. It appears that part of the radgrid header doesn't realise that it needs to resize. I've attached an image to illustrate this.

If I shorten the header text so that it doesn't wrap, then everything is fine.

I've created a small demo project that illustrates the problem, but I can't attach it here! (How can I do that?)

I'm using ASP.NET Ajax Q1 2010 / bin35 version.

Any idea how I can fix this?

John

[Dimo]

Hello John,

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("...............") ;
}


Note that the background image we are talking about is not visible in IE8 and Firefox3. In this case another workaround is possible, if you prefer to have the space above the vertical scrollbar filled with something.

http://www.telerik.com/community/forums/aspnet-ajax/grid/ie-8-header-ui-problem.aspx#1153840

Sincerely yours,
Dimo
the Telerik team

[john]

Thanks for your quick reply. What you have described works if I know that my headers are going to be wrapped onto two rows.

However, the product we make is sold into international markets, and we allow our customers to customize their pages, so we don't know whether they will customize some of the header texts to make them one, two or maybe three lines long. We have no control over it. So what I am asking is, can you think of a solution that will work for either wrapped or non-wrapped headers automatically?

John

[Dimo]

John,

In this case use option (2) in my previous reply and the space above the vertical scrollbar will be empty. This is how RadGrid looked in older versions.

Regards,
Dimo
the Telerik team