RadGrid group header has extra cell

[Walter]

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.

[Viktor Tachev]

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

[Walter]

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.

[Viktor Tachev]

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