Hi Eric,
You could use CSS to trick the browser in showing the text vertical. But mostly this is only supported in IE, not the other browsers.
Here is how I did it in one of my projects.
I just created images instead of text and these images where then shown in the header columns.
This example uses php to create an image, you could also do this with asp, ...
First you have to create an seperate php file. I called it headerpic.php
In this file your must paste next code and then save it.
<?php
//This is the text that must be shown in the in header column.
$txt = $_GET["txt"];
//Now create the image. The width is 20 and the height is 80
//It is possible that you have to change the height to suit your needs
$my_img = imagecreate( 20, 80 );
//Now set a standard background color white
$background = imagecolorallocate( $my_img, 255, 255, 255 );
//Now we make the white background transparent
imagecolortransparent ( $my_img, $background );
//This is the text color
$text_colour = imagecolorallocate( $my_img, 0, 0, 0 );
//Now we add the text to the image. The text will be vertical. You may need to change value 70. That's where to text starts in the picture.
imagestringup( $my_img, 3, 5, 70, $txt,$text_colour );
//Modify the header so it knows that the output of the file will be a gif image
header( "Content-type: image/gif" );
//output the gif image
imagegif( $my_img );
//Now destroy the created image (it was already sent)
imagecolordeallocate( $line_color );
imagecolordeallocate( $text_color );
imagecolordeallocate( $background );
imagedestroy( $my_img );
?>
In the file where you show the grid, you have to change the section in your script where you define the header text. Instead of text, you define <img> objects. The src is the file you just created, called headerpic.php. Just add the variable txt=...
This varibale will then be added as text to the image that will be created through the file 'headerpic.php'. This way you can create the header pictures dynamicaly and you don't have to create them upfront.
This is also great if you get the text for the header pictures out of queries.
var myHeaders = ["<img src='headerpic.php?txt=first header col>",["<img src='headerpic.php?txt=second header col>", ... ]
Don't forget to change the height of the header in the grid. As we created images with a height of 80, we also set the header height to 80
obj.setHeaderHeight(80);