This is a migrated thread and some comments may be shown as answers.

RadGrid with Scrollbar and Header Text that wraps causes formatting issue

3 Answers 143 Views
Grid
This is a migrated thread and some comments may be shown as answers.
john
Top achievements
Rank 1
john asked on 29 Sep 2010, 12:43 PM
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

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 29 Sep 2010, 01:12 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
john
Top achievements
Rank 1
answered on 29 Sep 2010, 02:17 PM
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
0
Dimo
Telerik team
answered on 29 Sep 2010, 02:29 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Grid
Asked by
john
Top achievements
Rank 1
Answers by
Dimo
Telerik team
john
Top achievements
Rank 1
Share this question
or