Vertical display of Header Text in Grid View ASP .NET

Question

Is there a way to display the headerText of the Grid View vertically?

http://img371.imageshack.us/img371/4813/testyk6.jpg

I hope the above link works

Thanks

Answer 1

I believe you'd have to use images. Either created at design time, or using a HttpHandler to generate images at run-time if they need to be dynamic. Make all of your fields use TemplateFields and place the image in the HeaderTemplate. Kind of tedious, but it's the only way I can think. Perhaps some third party grid controls can handle this.

Answer 2

Silverlight can do this (as can Flash, I'm sure). CSS3 will support it. But graphic text is the way to go right now.

You can use any of several text-hiding techniques in CSS to show the text for accessible browsers, yet display the graphic (with text arranged vertically) for sighted users.

Answer 3

Stu Nicholls has an interesting HTML/CSS technique, if a bit HTML verbose. However, it doesn't do the word rotation that you're looking for. Just throwing out another option.

Answer 4

If you don't mind an IE only solution, you could use some of the css filters that IE supports. Something like this:

<div style="width:100%; filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);">
    This text is rotated 90 degrees.
</div>

Answer 5

set HeaderText = "C<br />O<br />L<br />" etc

Answer 6

I've done it IE using the following CSS although it might be limited to browser, version etc...

writing-mode: tb-rl; filter: flipv fliph

Answer 7

In IE7+ you can use the DX transform:

writing-mode: tb-rl;
filter: flipv fliph;

In older IE (for the poor souls still stuck with it):

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

In Safari/Chrome (anything webkit based) you can use the transform:

-webkit-transform: rotate(270deg);

The latest FX builds have an equivalent:

-moz-transform: rotate(270deg);

But that's not mainstream yet.

I've been trying to do this with graphic text, but have a few problems.