[Solved] RadGrid adding blank space after last column in IE-8 Compatability Mode

[Randall]

Hello,

Telerik ASP.NET AJAX v2009.01.0527.20

I have a RadGrid that displays differently based on IE's brower mode.  Looks fine in IE-8 but not in IE-8 Compatability Mode (which I believe renders the same as IE-7).  the first screenshot shows IE-8 looking good.  The second screenshot shows IE-9 Compatability Mode adding filler space to the end of the grid.

My grid is set to Height="100%" and Width="100%" and resides in a RadSplitter pane.  It resized to fill the browser's available space.  The grid has several GridBoundColumn and custom columns (based on GridTemplateColumm), and each column has a defined width (in pixels) in the HeaderStyle (i.e., <HeaderStyle Width="##px" />).

IE-8 seems to add additional spacing to each column as it renders the grid to the 100% width of the defined area.  IE-8 Compatability Mode seems to add all the additional space to after the last column.

Here is part of my grid definition:

<telerik:RadGrid runat="server"
    ID="RadGrid1"
    AllowFilteringByColumn="True"
    AllowPaging="True"
    AllowSorting="True"
    AutoGenerateColumns="False"
    Height="100%"
    OnDataBound="RadGrid1_DataBound"
    OnItemCommand="RadGrid1_ItemCommand"
    OnItemCreated="RadGrid1_ItemCreated"
    OnItemDataBound="RadGrid1_ItemDataBound"
    OnNeedDataSource="RadGrid1_NeedDataSource"
    OnPreRender="RadGrid1_PreRender"
    PageSize="20"
    ShowFooter="True"
    ShowStatusBar="True"
    Width="100%"
    >

    <ClientSettings EnableRowHoverStyle="true">
        <Resizing AllowColumnResize="false"
               ClipCellContentOnResize="true"
               EnableRealTimeResize="true" />
        <Selecting AllowRowSelect="true" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
    </ClientSettings>

    <MasterTableView AllowPaging="true" TableLayout="Fixed">
        <Columns>
...
        </Columns>
    </MasterTableView>

    <PagerStyle AlwaysVisible="true" Mode="NextPrevAndNumeric" />
</telerik:RadGrid>

Is there a way to make IE-8 Compatability Mode look correct like IE-8 does?

Thanks,

Randall Price
Virginia Tech - Microsoft Implementation Group

[Dimo]

Hello Randall,

The observed layout in IE7 is expected if all columns have pixel widths. Please leave one column with no width. However, if the RadGrid control resizes together with its parent, this is not recommended, as the column with no width will become invisible if the RadGrid control becomes too narrow. A possible solution to this issue is to place the RadGrid control inside a container with a minimum width (min-width CSS style applied).

Here is some more information on column widths.

http://www.telerik.com/community/forums/aspnet/grid/best-practice-for-grid-and-column-widths.aspx#1214355

Kind regards,
Dimo
the Telerik team

[Randall]

Hello Dimo,

Thanks for the link to the information about best practices for RadGrid column widths.  With some experimentation with the settings, i was able to resolve this issue.  Basically, I changed the following:

1. <MasterTableView AllowPaging="true" TableLayout="Fixed"> to TableLayout="Auto"
2. Set a pixel width on all but one of the columns which allows that column to grow and shrink as necessary

I would also like to suggest that you create an FAQ for RadGrid column width best practices (or somehow make this information easier to find on your site).  I am sure that others will benefit from this as well.

Thanks,

Randall Price
Virginia Tech - Microsoft Implementation Group