This is a migrated thread and some comments may be shown as answers.

RadGridView With Vertical Column Header

10 Answers 803 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Goraksh
Top achievements
Rank 1
Goraksh asked on 08 Aug 2013, 11:35 AM
Hello Friends,
         I want to Design my RadGridView lik shown  in the image please tell me how to do this.

10 Answers, 1 is accepted

Sort by
0
Venelin
Telerik team
answered on 13 Aug 2013, 11:27 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Goraksh
Top achievements
Rank 1
answered on 20 Aug 2013, 09:25 AM
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.

0
GDPR_erased
Top achievements
Rank 1
answered on 03 Mar 2014, 10:47 AM
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
0
Venelin
Telerik team
answered on 06 Mar 2014, 09:40 AM
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

DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

0
GDPR_erased
Top achievements
Rank 1
answered on 06 Mar 2014, 10:44 AM
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
0
Venelin
Telerik team
answered on 11 Mar 2014, 09:15 AM
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

DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

0
Aaron
Top achievements
Rank 1
answered on 25 Jan 2016, 02:54 PM

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

 

 

0
Venelin
Telerik team
answered on 26 Jan 2016, 07:15 AM
Hi Aaron,

Which version of the controls do you use?

Regards,
Venelin
Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Aaron
Top achievements
Rank 1
answered on 26 Jan 2016, 01:09 PM
2015.3.1111.40
0
Venelin
Telerik team
answered on 27 Jan 2016, 08:10 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Goraksh
Top achievements
Rank 1
Answers by
Venelin
Telerik team
Goraksh
Top achievements
Rank 1
GDPR_erased
Top achievements
Rank 1
Aaron
Top achievements
Rank 1
Share this question
or