How to add a label on RadGrid Column Group ?

2 posts, 0 answers
  1. Priyadharshini
    Priyadharshini  avatar
    2 posts
    Member since:
    Mar 2019

    Posted 12 Mar Link to this post

    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.

  2. Doncho
    Admin
    Doncho avatar
    73 posts

    Posted 16 Mar Link to this post

    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.
Back to Top