Header and item column alignment with static headers IE 8 Compatibility Mode

[James Daresta]

I am having an issue with a lot of columns that the headers and items do not line up properly when using non-resizable columns, scrolling and IE 8 Compatibility mode. They seem to be shifting to the left some. Is there a style fix or something for this. See attached screenshot and code below. Thanks in advance.

<table align="center" width="99%" style="table-layout:fixed">
    <tr>
        <td>
            <telerik:RadGrid ID="rgMelissaOutputReport_Report" runat="server"
                AllowFilteringByColumn="False"
                AllowPaging="True"
                AllowSorting="True"
                ClientSettings-AllowColumnHide="true"
                AutoGenerateColumns="True"
                ShowGroupPanel="False"
                ShowFooter="False"
                EnableHeaderContextMenu="true"
                OnNeedDataSource="rgMelissaOutputReport_Report_NeedDataSource"
                OnItemDataBound="rgMelissaOutputReport_Report_ItemDataBound"
                OnPageSizeChanged="rgMelissaOutputReport_Report_PageSizeChanged"
                OnPageIndexChanged="rgMelissaOutputReport_Report_PageIndexChanged"
                OnExcelExportCellFormatting="rgMelissaOutputReport_Report_ExcelExportCellFormatting"
                ExportSettings-IgnorePaging="true"
                ExportSettings-OpenInNewWindow="true"
                ExportSettings-ExportOnlyData="true"
                CssClass="RadGrid_Default RadGrid_Default2">
            <MasterTableView
                CommandItemDisplay="Top"
                CommandItemSettings-ShowAddNewRecordButton="false"
                PageSize="50">
            <HeaderStyle Wrap="false" />
            <ItemStyle Wrap="false" />
            <RowIndicatorColumn>
            <HeaderStyle Wrap="false"></HeaderStyle>
            </RowIndicatorColumn>
            <ExpandCollapseColumn>
            <HeaderStyle Wrap="false"></HeaderStyle>
            </ExpandCollapseColumn>
            <NoRecordsTemplate>
            <asp:Label ID="lblNoTotalsRecords" runat="server" CssClass="LabelBold" Text="No records for the filtering selections you have chosen."></asp:Label>
            </NoRecordsTemplate>
            </MasterTableView>
                <ClientSettings
                    Resizing-AllowColumnResize="false"
                    EnableRowHoverStyle="false"
                    ReorderColumnsOnClient="false">
                    <Selecting AllowRowSelect="false" />
                    <Scrolling AllowScroll="True"
                    UseStaticHeaders="True" />
                    <ClientEvents OnCommand="rgMelissaOutputReport_Report_RaiseCommand" />
                </ClientSettings>

            </telerik:RadGrid>
        </td>
    </tr>
</table>

[Pavlina]

Hi James,

Keep in mind that when scrolling is enabled and UseStaticHeaders is True, the grid columns should declare HeaderStyle.Width.

Additionally, I followed your scenario and prepared a sample working project. Check it out and let me know if it helps to resolve the problem.

Best wishes,
Pavlina
the Telerik team

[James Daresta]

I afraid it did not help. I even tried outrageously wide columns and it still shifts. Here is the code I have now and a screenshot of what it going on. Again it works fine in IE8 without compatibility mode. Its only in IE7 compatibility mode this occurs.

<table align="center" width="99%" style="table-layout:fixed">
    <tr>
        <td>
            <telerik:RadGrid ID="rgMelissaOutputReport_Report" runat="server"
                AllowFilteringByColumn="False"
                AllowPaging="True"
                AllowSorting="True"
                AutoGenerateColumns="True"
                ShowGroupPanel="false"
                ShowFooter="false"
                ShowStatusBar="false"
                EnableHeaderContextMenu="true"
                OnNeedDataSource="rgMelissaOutputReport_Report_NeedDataSource"
                OnItemDataBound="rgMelissaOutputReport_Report_ItemDataBound"
                OnPageSizeChanged="rgMelissaOutputReport_Report_PageSizeChanged"
                OnPageIndexChanged="rgMelissaOutputReport_Report_PageIndexChanged"
                OnExcelExportCellFormatting="rgMelissaOutputReport_Report_ExcelExportCellFormatting"
                ExportSettings-IgnorePaging="true"
                ExportSettings-OpenInNewWindow="true"
                ExportSettings-ExportOnlyData="true"
                CssClass="RadGrid_Default RadGrid_Default2">
            <MasterTableView
                CommandItemDisplay="Top"
                CommandItemSettings-ShowAddNewRecordButton="false"
                PageSize="50"
                HeaderStyle-Width="400px">
            <HeaderStyle Wrap="false" />
            <ItemStyle Wrap="false" />
            <NoRecordsTemplate>
            <asp:Label ID="lblNoTotalsRecords" runat="server" CssClass="LabelBold" Text="No records for the filtering selections you have chosen."></asp:Label>
            </NoRecordsTemplate>
            </MasterTableView>
                <ClientSettings
                    Resizing-AllowColumnResize="false"
                    EnableRowHoverStyle="false"
                    ReorderColumnsOnClient="false">
                    <Selecting AllowRowSelect="false" />
                    <Scrolling AllowScroll="True"
                    UseStaticHeaders="True" />
                    <ClientEvents OnCommand="rgMelissaOutputReport_Report_RaiseCommand" />
                </ClientSettings>

            </telerik:RadGrid>
        </td>
    </tr>
</table>

[Pavlina]

Hello James,

I took the sample code you provided and put it in a sample page following a similar scenario you have, but I was not able to replicate the alignment issue in IE 8 Compatibility Mode.I am attaching the page for your reference. Please let me know if you manage to reproduce what you are getting in this project, and what steps to follow, so that we can test it too.

All the best,
Pavlina
the Telerik team

[James Daresta]

Ok it is my fault in my usage of additional style. I wanted the headers to have dividing lines to make it easier in the Default skin for resizing. Its the extra pixel for the border I am using to show the dividers. The more columns the more the alignment shifts due to that 1px border. I think to solve it I will need to put on the items a transparent border of 1px to offset with the headers. To see what I am talking about put the following css style in the header of the sample page you gave me. Thanks for the help.

    <style>
 .RadGrid_Default2 .rgHeader,
.RadGrid_Default2 th.rgResizeCol
{
    border-right:1px solid #828282 !important;
}

.RadGrid_Default2 .rgDataDiv
{
    overflow-y:scroll !important;
}
    </style>

[Pavlina]

Hi James,

Could you provide a live URL where we can reproduce the issue?

All the best,
Pavlina
the Telerik team

[James Daresta]

I am afraid I cannot because the app is an internal intranet app. However, if in your sample you put that style block in the sample page it should produce the same results. I did that on my end to replicate the issue.

[Pavlina]

Hello James,

To avoid the alignment issue in IE8 Compatibility mode you could use the CSS code below:

div.RadGrid_Default th.rgHeader
       {
           padding-left: 6px;
       }

Moreover, attached to this message is a working test project. Please examine it and let me know what is the difference in your case.

Greetings,
Pavlina
the Telerik team