If I place the Grid in a table, the horizontal resize fails. If I increase IE window width, the grid resizes properly. If I decrease IE window width, the grid does not resize and IE starts to display an horizontal scrollbar.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TelerikGrid.aspx.cs" Inherits="Application_Test_TelerikGrid" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html,
body,
form
{
margin:0px;
padding:0px;
height:100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<table style="width:100%;height:100%">
<tr>
<td style="height:100%">
<telerik:RadGrid
ID="RadGrid1"
runat="server"
DataSourceID="XmlDataSource1"
AllowPaging="true"
PageSize="40"
Width="100%"
Height="100%"
style="border:0;outline:none"
>
<MasterTableView TableLayout="Auto"/>
<ClientSettings EnableRowHoverStyle="true">
<Selecting AllowRowSelect="true" />
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
</ClientSettings>
<PagerStyle Mode="NextPrevAndNumeric" />
</telerik:RadGrid>
</td>
</tr>
</table>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/datasource.xml" />
</form>
</body>
</html>
If I change <table> by <div> it works properly. I am using 2009.1.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TelerikGrid.aspx.cs" Inherits="Application_Test_TelerikGrid" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
html,
body,
form
{
margin:0px;
padding:0px;
height:100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div style="width:100%;height:100%">
<telerik:RadGrid
ID="RadGrid1"
runat="server"
DataSourceID="XmlDataSource1"
AllowPaging="true"
PageSize="40"
Width="100%"
Height="100%"
style="border:0;outline:none"
>
<MasterTableView TableLayout="Auto"/>
<ClientSettings EnableRowHoverStyle="true">
<Selecting AllowRowSelect="true" />
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
</ClientSettings>
<PagerStyle Mode="NextPrevAndNumeric" />
</telerik:RadGrid>
</div>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/datasource.xml" />
</form>
</body>
</html>
This is happening on IE 7 and 8. Both code samples work properly on FF 3.0.7.
Thanks
1 Answer, 1 is accepted
The observed behavior is a bug in Internet Exporer, related to scrollable containers placed inside table cells. The solution is to add an overflow:hidden style to RadGrid. You also need zero cellpadding and cellspacing for the wrapper table, otherwise the page scrollbar will appear:
<table style="width:100%;height:100%" cellpadding="0" cellspacing="0">
<tr>
<td style="height:100%">
<telerik:RadGrid
ID="RadGrid1"
runat="server"
OnNeedDataSource="RadGrid_NeedDataSource"
AllowPaging="true"
PageSize="40"
Width="100%"
Height="100%"
style="border:0;outline:none;overflow:hidden"
>
<MasterTableView TableLayout="Auto"/>
<ClientSettings EnableRowHoverStyle="true">
<Selecting AllowRowSelect="true" />
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
</ClientSettings>
<PagerStyle Mode="NextPrevAndNumeric" />
</telerik:RadGrid>
</td>
</tr>
</table>
Regards,
Dimo
the Telerik team
Check out Telerik Trainer , the state of the art learning tool for Telerik products.