4

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

user21968
  • 1,145
  • 6
  • 13
  • 19

8 Answers8

2

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.

Travis Collins
  • 3,982
  • 3
  • 31
  • 44
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.

John Dunagan
  • 1,445
  • 3
  • 18
  • 30
2

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

Simon Keep
  • 9,886
  • 9
  • 63
  • 78
1

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.

Forgotten Semicolon
  • 13,909
  • 2
  • 51
  • 61
1

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>
Travis Collins
  • 3,982
  • 3
  • 31
  • 44
1

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.

Community
  • 1
  • 1
Keith
  • 150,284
  • 78
  • 298
  • 434
0
/*Do this in a loop for each header cell so Cells[0] to cells[however many] and however long the string is so use length properties to get the actual length of the text string */ 

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
        {
         StringBuilder vtxt = new StringBuilder();
            vtxt.Append(GridView1.HeaderRow.Cells[0].Text.ToString().Substring(0,1));
            vtxt.Append("<br />");
            vtxt.Append(GridView1.HeaderRow.Cells[0].Text.ToString().Substring(1, 1));
            vtxt.Append("<br />");
            vtxt.Append(GridView1.HeaderRow.Cells[0].Text.ToString().Substring(2, 1));
            vtxt.Append("<br />");
            vtxt.Append(GridView1.HeaderRow.Cells[0].Text.ToString().Substring(3, 1));
            vtxt.Append("<br />");
            vtxt.Append(GridView1.HeaderRow.Cells[0].Text.ToString().Substring(4, 1));
            vtxt.Append("<br />");
            vtxt.Append(GridView1.HeaderRow.Cells[0].Text.ToString().Substring(5, 1));
            vtxt.Append("<br />");
            vtxt.Append(GridView1.HeaderRow.Cells[0].Text.ToString().Substring(6, 1));
            vtxt.Append("<br />");
            vtxt.Append(GridView1.HeaderRow.Cells[0].Text.ToString().Substring(7, 1));

            GridView1.HeaderRow.Cells[2].Text = vtxt.ToString();
        }
Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
annie
  • 1
0

I used a break (br) command between each letter

Leon Botha
  • 11