Thani's Blog

We had a scenario where there's a necessity to display the column headers vertically. Usually the headers will be horizontals by default. Below picture shows the default headers.

The needed ouput was displayed below.

The Grid control that is used for this display is GridView. So I did a little bit of search and found some good solutions in the web. It's all achievable with styles.

Step 1:

Create the following styles in the Master page file or the Style class file or in the page where required.

Writing-Mode defines how the text has to be written. Once style is given the header will come from top to bottom but in reverse order. In the above example StratDate will be shown from top to bottom. But I need to display them from bottom to top. Hence I used fliph() and flipv(). These styles flip the text horizontally and vertically giving the bottom to top text.

Then define the class for the Grid control's header. I am defining them for the GridView here.

That's it you can get the Vertical column's easily.

Caution:

For now these styles are supported in IE alone. I have not tested this in other browsers.

Thanks,

Thanigainathan Siranjeevi