RadGrid group header has extra cell

4 posts, 0 answers
  1. Walter
    Walter avatar
    6 posts
    Member since:
    Jul 2011

    Posted 25 Apr Link to this post

    I am unable to center the text in the group headers of my RadGrid. When I inspect the page I see that the header row is comprised of two <td> tags instead of one. The second <td> holds the desired text and is center-aligned, but because of the extra cell the text appears pushed over towards the right.

    Here's the relevant code:

    <p><telerik:RadGrid runat="server" ID="RadGridUsers" <br>                    AutoGenerateColumns="False" <br>                    ShowGroupPanel="False"<br>                    GroupingSettings-GroupContinuesFormatString=""<br>                    OnNeedDataSource="RadGridNeedDataSource"<br>                    AllowPaging="True" <br>                    OnColumnCreated="RadGridColumnCreated"<br>                    OnItemCreated="RadGridItemCreated"<br>                    EnableViewState="True"><br>                    <ClientSettings><br>                        <Scrolling UseStaticHeaders="True" ScrollHeight="100px"/><br>                    </ClientSettings><br>                    <MasterTableView AllowAutomaticUpdates="False" AllowPaging="True" PageSize="20" PagerStyle-AlwaysVisible="True" AllowSorting="True" AllowFilteringByColumn="True" Width="100%"><br>                        <GroupByExpressions><br>                            <telerik:GridGroupByExpression><br>                                <GroupByFields><br>                                    <telerik:GridGroupByField  FieldName="Department" SortOrder="Ascending"/><br>                                </GroupByFields><br>                                <SelectFields><br>                                    <telerik:GridGroupByField FieldName="Department"/><br>                                </SelectFields><br>                            </telerik:GridGroupByExpression><br>                        </GroupByExpressions><br>                        <GroupHeaderItemStyle BackColor="#99bbff" ForeColor="DarkBlue" HorizontalAlign="Center" Font-Bold="True"/><br>                        <GroupHeaderTemplate><br>                            <asp:Label runat="server" ID="Label5" Text='<%# Eval("Department")%>'/><br>                        </GroupHeaderTemplate><br>                        <SortExpressions><br>                            <telerik:GridSortExpression FieldName="LastName" SortOrder="Ascending"/><br>                        </SortExpressions></p>

     

    In the ColumnCreated event I'm hiding the group splitter:

    <p>Protected Sub RadGridColumnCreated(ByVal sender As Object, ByVal e As GridColumnCreatedEventArgs)<br>            If (TypeOf (e.Column) Is GridGroupSplitterColumn) Then e.Column.Visible = False<br>        End Sub</p>

     

    In the ItemCreated event I'm removing the grouping controls:

    <p>Protected Sub RadGridItemCreated(ByVal sender As Object, ByVal e As GridItemEventArgs)<br>            If (TypeOf (e.Item) Is GridFilteringItem) Then<br>                Dim item As GridFilteringItem = e.Item<br>                If (TypeOf (e.Item) Is GridGroupHeaderItem) Then<br>                e.Item.Cells(0).Controls.Clear()<br>                e.Item.Cells(0).Width = 0<br>            End If<br>            End Sub</p>

     

    The output looks something like this:

    <tr class="rgGroupHeader">

    <td style="width:0;"></td>

    <td style="text-align:center;">Foobar</td>

    </tr>

    ...followed by the rows of data.

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 28 Apr Link to this post

    Hi Walter,

    If you would like to center the text in the grid group header you can use the following CSS.

    .rgGroupHeader td:last-child {
        text-align: center;
    }

    Give the approach a try and let me know how it works for you.

    Regards,
    Viktor Tachev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Walter
    Walter avatar
    6 posts
    Member since:
    Jul 2011

    Posted 28 Apr in reply to Viktor Tachev Link to this post

    Thank you for your suggestion, Viktor, but it doesn't solve the problem. I get the same result as I do with setting the GroupHeaderItemStyle's HorizontalAlign to "Center". The problem here seems to be the extra <td></td> immediately before the <td> that holds the group header's text. See the output sample at the end of my first post.
  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 03 May Link to this post

    Hello Walter,

    I tried to replicate the behavior you describe, however, I was not able to. I am attaching a sample project I used for testing.

    Give the attached sample a try and let me know how it works for you. I would appreciate it if you can describe what needs to be changed in order to replicate the behavior you are seeing.

    Regards,
    Viktor Tachev
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top