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

How to add a label on RadGrid Column Group ?

1 Answer 479 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Priyadharshini
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
0
Doncho
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">
    <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.

 

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

 

I hope that will prove helpful!

Kind regards,
Doncho
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.
Tags
Grid
Asked by
Priyadharshini
Top achievements
Rank 1
Answers by
Doncho
Telerik team
Share this question
or