This is a migrated thread and some comments may be shown as answers.

[IE6/IE7] problem resize column grid

3 Answers 28 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Snoopy
Top achievements
Rank 1
Snoopy asked on 04 Sep 2012, 01:51 PM
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

3 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 06 Sep 2012, 08:13 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Snoopy
Top achievements
Rank 1
answered on 07 Sep 2012, 06:29 AM

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

0
Pavlina
Telerik team
answered on 07 Sep 2012, 11:30 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Snoopy
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Snoopy
Top achievements
Rank 1
Share this question
or