RadGridView With Vertical Column Header

[Goraksh]

Hello Friends,
         I want to Design my RadGridView lik shown  in the image please tell me how to do this.

[Venelin]

Hi Goraksh,

I think for your case you need to use a RadPivotGrid instead of RadGrid, because you have row field, column field and data/fact field as shown on the image.

In general, there is no out-of-the-box feature to make a vertical text in RadPivotGrid, but it could be done with few lines of css and javascript.

Firstly, we need to traverse all column headers that we want to rotate and wrap the text in it with a <span> html element.

JavaScript:

function onPivotCreated(sender, eventArgs) {
    var columnHeaders = $telerik.getElementsByClassName(sender.get_columnHeaderTable(), "rpgColumnHeader"),
        content;
    content = columnHeaders[8].innerHTML
    columnHeaders[8].innerHTML = '<span class="rotated">' + content + '</span>';
    content = columnHeaders[9].innerHTML
    columnHeaders[9].innerHTML = '<span class="rotated">' + content + '</span>';
}

In this example only the 8th and 9th column headers are taken.

ASPX:

<ClientSettings Scrolling-AllowVerticalScroll="true">
    <ClientEvents OnPivotGridCreated="onPivotCreated" />
</ClientSettings>

here, OnPivotGridCreated event we attach an event handler named onPivotCreated which will wrap the text.

Secondly, define a CSS rule that will apply the desired styles:

.RadPivotGrid .rpgColumnHeader .rotated {
    display: inline-block;
    width: 40px;
    padding-top: 70px;
    height: 120px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Please also find attached a sample project that illustrates the approach.

Regards,
Venelin
Telerik

[Goraksh]

Thank you very much Venelin......, But I was expecting some quick response and within next 2 days after posting my problem I got some good solutions.
Solution is same as yours but I did it in C# code not in Javascript and My grid is still a RadGrid. The code is as follows,
NewColumn.HeaderText = "<table><tr><th><div class=" + "\"test\"" + ">" + dtDiagnosticsGrid.Columns[i].ColumnName + "</div></th></tr></table>";
Where test is my cssclass and test contains following styles..
.test
{
                writing-mode: tb-rl;
                filter: flipv fliph;
                white-space: nowrap;
                display: block;
                -moz-transform: rotate(270deg) translate(-27em,0);
                -moz-transform-origin: 0 0;
                height: 290px;
                font-style: normal;
                font-weight: bold;
                padding-left: 10px;  
                padding-bottom :10px !important;              
                border-bottom-style: solid !important;
                text-align:right !important;
} 

PFA Grid designed using above code...
Thank You...
Goraksh
Delmon Epoa-team.

[GDPR_erased]

Goraksh,
I need to do this as well, but I need to do it server side too. Could you post the code that builds the column header text from the server side? Was it itemdatabound?
Thanks,
~bg

[Venelin]

Hi Bill,

Could you please specify on which control (RadGrid or RadPivotGrid) you want to rotate the headers?
For RadGrid there is a build in feature which is enabled by simple set the CssClass="rgRotateHeader" to the desired columns. For the PivotGrid, you can use the workaround I've already provided or another possibility (server-side):

C#

protected void RadPivotGrid2_CellDataBound(object sender, PivotGridCellDataBoundEventArgs e)
{
    if (e.Cell.Text == "Athens")
    {
        e.Cell.Text = "<span class='rotated'>" + e.Cell.Text + "</span>";
    }
}

This is done OnCellDataBound event.

Regards,
Venelin
Telerik

[GDPR_erased]

Hey, thanks Venelin!
Actually, I'm trying it on both the readgrid and the radpivotgrid, but my problem is that I am autogenerating the colums, and I do not know what the header text will be. I need to try to apply a style server side for both Grids..
So on the RadGrid  do I apply the CssClass="rgRotateHeader" on Itemdatabound?
And on the PivotGrid do I apply the e.Cell.Text = "<span class='rotated'>" + e.Cell.Text + "</span>"; on cellDatabound?
But, how do I identify if it is a  column header?
Thanks, this has been most helpful.
~bg

[Venelin]

Hi Bill,

C#:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if(e.Item is GridHeaderItem)
    {
        GridHeaderItem headerItem = e.Item as GridHeaderItem;
        (headerItem["ColumnUniqueName"]).CssClass += " rotated";
    }
}

Even though the columns are auto-generated you still know the DataField. If no ColumnUniqueName is set, by default the unique name is set to be equal to the corresponding data field name. If you want to rotate all the headers it's even easier because you have to just iterate through all the data cells in this item.

Please refer to our documentation for further reference:
http://www.telerik.com/help/aspnet-ajax/grid-accessing-cells-and-rows.html

Regards,
Venelin
Telerik

[Aaron]

Within the AjaxRadGrid, the "rgRotateHeader" doesn't rotate the header 90 degrees.  It's rather silly.

 

 

[Venelin]

Hi Aaron,

Which version of the controls do you use?

Regards,
Venelin
Telerik

[Aaron]

2015.3.1111.40

[Venelin]

Hi Aaron,

We are aware of such problem in Firefox and we'll fix it. It comes from the fact that we use css3 transform to rotate the headers in most browsers and writing-mode to do the same in IE, which doesn't support transfrom. It worked well until Firefox decided to implement writing-mode too, and now the rotation happens twice in this browser:

https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode.

Regards,
Venelin
Telerik