[Solved] UseStaticHeaders in IE7

[Justin Lee]

I have a simple grid that is using UseStaticHeaders="true".

It works fine in IE8, but when I switch to compatibility mode (spoof IE7), the headers are always a few pixels wider than the columns.  Since there are many columns, the alignment is way off for the farthest right column.

Here is the grid and a temp datasource. (I stripped down the grid so it was easier to deal with - it still displays this behavior)
Note: you have to be in compatibility mode to see the mis-alignment.

<telerik:RadGrid ID="theGrid" runat="server" Height="200px" OnNeedDataSource="theGrid_NeedDataSource">
            <ClientSettings>
                <Scrolling AllowScroll="true" UseStaticHeaders="true"/>
            </ClientSettings>
            <ItemStyle CssClass="editableGridCell"  />
            <AlternatingItemStyle CssClass="editableGridCell" BackColor="#ffffff" />
            <HeaderStyle CssClass="editableGridHeader" BorderWidth="1px" BorderColor="LightGray" BorderStyle="Solid" />
            <MasterTableView DataKeyNames="Code" AutoGenerateColumns="false" TableLayout="Fixed" Width="180px">

                <Columns>
                    <telerik:GridBoundColumn DataField="Code" HeaderText="Code Sequence">
                        <ItemStyle Width="90px" />
                        <HeaderStyle Width="90px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Code Name">
                        <ItemStyle Width="90px" />
                        <HeaderStyle Width="90px" />
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

And the code behind:

protected void theGrid_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            DataTable table = new DataTable();
            table.Columns.Add("Code", typeof(String));
            table.Columns.Add("Name", typeof(String));

            table.Rows.Add("asdfasdf", "asdfasdfasdfasdf");

            theGrid.DataSource = table;
        }

Let me know what I have to do.

Thanks,
Justin

[Dimo]

Hello Justin,

Please remove all ItemStyle-Width settings, the MasterTableView width and the MasterTableView's declarative border styles.

Another possible cause of the problem is that the sum of the header cell paddings and borders is not equal to the data cell paddings and borders. This can happen if you are using a custom skin or some CSS styles on the page override the RadGrid styles. Some more relevant information is available at:

http://www.telerik.com/support/kb/aspnet-ajax/grid/how-to-align-radgrid-cells-when-using-scrolling-and-gridlines.aspx

(Generally we do not recommend using the GridLines property at all).

Kind regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Justin Lee]

Thanks for the tips.  The fixed widths of the columns are needed in this circumstance, however the paddings for my headers were different than the items, and once I matched them up, it displayed correctly.

Thanks!