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

RadGrid problem with EmulateIE7

1 Answer 157 Views

General Discussions

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

domenico asked on 18 Nov 2011, 04:34 PM

wrong.png

correct.png

Hello,
I use 'RadControls for ASP.NET AJAX Q1 2011 SP2', Windows7 and IE9, I have a problem on the column width of a radgrid.
When I use the document compatibility mode 'EmulateIE7', the width of the columns's header occupies all the grid instead the width of the data items is the value defined. This is a sample to simulate the problem:

<%@ Page EnableEventValidation="false" Language="C#" AutoEventWireup="true" MaintainScrollPositionOnPostback="true"

CodeBehind="Dome1.aspx.cs" Inherits="WebApplication1.Dome1" %>

<%@ Import Namespace="System.Data" %>

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

<script runat="server">

protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

DataTable dt = new DataTable();

DataRow dr;

int colsNum = 12;

int rowsNum = 10;

string colName = "Column";

for (int j = 1; j <= colsNum; j++)

{

dt.Columns.Add(String.Format("{0}{1}", colName, j));

}

for (int i = 1; i <= rowsNum; i++)

{

dr = dt.NewRow();

for (int k = 1; k <= colsNum; k++)

{

dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);

}

dt.Rows.Add(dr);

}

(sender as RadGrid).DataSource = dt;

}

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<%-- Comment the following line to remove the problem --%>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>RadGrid problem</title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="False" OnNeedDataSource="RadGrid_NeedDataSource"

Width="100%">

<MasterTableView TableLayout="fixed">

<Columns>

<telerik:GridBoundColumn DataField="Column1" HeaderText="Header 1" />

<telerik:GridBoundColumn DataField="Column2" HeaderText="Header 2" />

</Columns>

</MasterTableView>

<HeaderStyle Width="200px" />

<ClientSettings>

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

</ClientSettings>

</telerik:RadGrid>

</form>

</body>

</html>

See the attached image:
    - wrong.png with the compatibility mode EmulateIE7
    - correct.png, without the line:
        '<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Why the strange rendering with EmulateIE7 mode?

1 Answer, 1 is accepted

answered on 23 Nov 2011, 04:42 PM

Hi Domenico,

This meta tag forces the IE browser into compatibility mode. You can achieve the same testing mode by using the IE Developer Toolbar, which is activated with shortcut F12, too.

However, could you try to set Width="99%" to the MasterTableView and let me know how it goes?

Additionally, our system indicates that you have opened a support ticket concerning the same issue. In order to avoid duplicate posts, I suggest that we continue the communication in the support thread.

Kind regards,
Galin
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