[IE6/IE7] problem resize column grid

[Snoopy]

Hello,

I have a RadGrid contained in a Div width of 986px. The columns of the grid can be resized. When the column width exceeds 986px I do have a horizontal scroll and it works in browsers IE8, IE9, Firefox, Chrome and Safari. By cons in IE6/IE7 I have a vertical scroll in addition to the right of the grid.

How to not have to scroll vertical?
Aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent" >
    <asp:Panel runat="server" Width="968px">
        <div style="height: 20px"></div>
        <div>
            <telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True"
                AutoGenerateColumns="False" CellSpacing="0" GridLines="None">
            <ClientSettings >
                <Resizing AllowColumnResize="True" ResizeGridOnColumnResize="False" ></Resizing>
                <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="True" ></Scrolling>
            </ClientSettings>
            <MasterTableView >
                <Columns>
                    <telerik:GridBoundColumn FilterControlAltText="Filter column column" EmptyDataText=""
                        HeaderText="Col1" UniqueName="column1">
                        <HeaderStyle Width="150px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn FilterControlAltText="Filter column1 column"
                        HeaderText="Col2" UniqueName="column2">
                        <HeaderStyle Width="150px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn FilterControlAltText="Filter column2 column"
                        HeaderText="Col3" UniqueName="column3">
                        <HeaderStyle Width="150px" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn FilterControlAltText="Filter column3 column"
                        HeaderText="Col4" UniqueName="column4" EmptyDataText="">
                        <HeaderStyle Width="150px" />
                    </telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
            </telerik:RadGrid>
        </div>
        <div style="height: 20px"></div>
    </asp:Panel>
</asp:Content>

cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    public class ObjetDataRow
    {
        public string Colonne1 { get; set; }
        public string Colonne2 { get; set; }
        public string Colonne3 { get; set; }
        public string Colonne4 { get; set; }
    }

    private IList<ObjetDataRow> datas { get; set; }

    protected void LoadData()
    {
        if (datas == null)
        {
            datas = new List<ObjetDataRow>
                        {
                            new ObjetDataRow()
                                {
                                    Colonne1 = "Row1Colonne1",
                                    Colonne2 = "Row1Colonne2",
                                    Colonne3 = "Row1Colonne3",
                                    Colonne4 = "Row1Colonne4"
                                },
                            new ObjetDataRow()
                                {
                                    Colonne1 = "Row2Colonne1",
                                    Colonne2 = "Row2Colonne2",
                                    Colonne3 = "Row2Colonne3",
                                    Colonne4 = "Row2Colonne4"
                                },
                            new ObjetDataRow()
                                {
                                    Colonne1 = "Row3Colonne1",
                                    Colonne2 = "Row3Colonne2",
                                    Colonne3 = "Row3Colonne3",
                                    Colonne4 = "Row3Colonne4"
                                },
                            new ObjetDataRow()
                                {
                                    Colonne1 = "Row4Colonne1",
                                    Colonne2 = "Row4Colonne2",
                                    Colonne3 = "Row4Colonne3",
                                    Colonne4 = "Row4Colonne4"
                                }
                        };
        }
        RadGrid1.ClientSettings.Scrolling.ScrollHeight = new Unit();
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        LoadData();
        if (!IsPostBack)
        {
            RadGrid1.DataSource = datas;
        }
    }
}

 cordially

[Pavlina]

Hello,

If all columns have a fixed pixel width, then the sum of all widths must match the RadGrid width, otherwise due to the different way IE6/7 and all other browsers apply column widths, you will end up with inconsistent combination of RadGrid width and column widths. In such cases it is good to leave one column without a width (e.g. the last one), so that it can adjust automatically.

Greetings,
Pavlina
the Telerik team

[Snoopy]

hello,

ResizeGridOnColumnResize property = false because the number of columns can not fit in a 968px width so I automatically scroll horizontally. Until then it suits me. Except that the vertical scroll in IE6/IE7 is added as if the grid could not be properly resize, not taking into account the horizontal scroll.

sincerely

[Pavlina]

Hi,

IE 6 and 7 always display vertical scroll bar, this is browser specific behaviour. To remove the scrollbar you can add the CSS code below:

html { overflow: hidden; }

Regards,
Pavlina
the Telerik team