How to add a label on RadGrid Column Group ?

[Priyadharshini]

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.

[Doncho]

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">
    <ClientSettings>
        <ClientEvents OnGridCreated="OnGridCreated" />
    </ClientSettings>
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">
        <ColumnGroups>
            <telerik:GridColumnGroup HeaderStyle-CssClass="verticalGroupName" HeaderText="Group1" Name="Group1">
            </telerik:GridColumnGroup>
        </ColumnGroups>
        <Columns>
            <telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
                FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
                ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID" ColumnGroupName="Group1">
            </telerik:GridBoundColumn>
            <telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime" ColumnGroupName="Group1"
                FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
                SortExpression="OrderDate" UniqueName="OrderDate">
            </telerik:GridDateTimeColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

 

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.

• Multicolumn Headers
• jQuery DOM Manipulation
• CSS text-orientation

 

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

 

I hope that will prove helpful!

Kind regards,
Doncho
Progress Telerik