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

How to add a label on RadGrid Column Group ?

1 Answer 499 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Priyadharshini asked on 13 Mar 2020, 04:18 AM

Dear Telerik Community,


I am having a requirement where rad gird column group text is rotated vertically. For that i want to insert some label and apply css. I have checked the docs to add template on Column group. but didn't find any. Is there any way or am i missed something.

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 16 Mar 2020, 02:15 PM

Hi Priyadharshini,

Normally rotating text can be done using CSS. In this case, however, the HTML structure needed for that is different. To change the structure, one of the easiest way would be by using JavaScript.

Here is one example approach:

Assuming the following Mark-up. Note the GridCreated event attached to the Grid:

<telerik:RadGrid ID="RadGrid1" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource">
        <ClientEvents OnGridCreated="OnGridCreated" />
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
            <telerik:GridColumnGroup HeaderStyle-CssClass="verticalGroupName" HeaderText="Group1" Name="Group1">
            <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID" ColumnGroupName="Group1">
            <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime" ColumnGroupName="Group1"
                FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                SortExpression="OrderDate" UniqueName="OrderDate">


JavaScript - In the GridCreated event handler, try wrapping the text in <span> element that has a custom CSS class assigned to it. This is needed in order to be able to rotate this element vertically.

function OnGridCreated(sender, args) {
    $('.RadGrid .rgMasterTable thead').find('.rgHeader.verticalGroupName').each(function () {
        var $headerCell = $(this);
        $headerCell.html('<span class="verticalText">' + $headerCell.text() + '</span>');


The CSS style that will set the writing mode to vertical:

.RadGrid .verticalText {
    writing-mode: vertical-rl;
    text-orientation: mixed;


Here are some links you might find useful.


You may adjust this example and incorporate it in your website.


I hope that will prove helpful!

Kind regards,
Progress Telerik

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question