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

Resize issue if grid placed in a table

1 Answer 44 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Teodorico
Top achievements
Rank 1
Teodorico asked on 26 Mar 2009, 02:17 AM

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

Sort by
0
Dimo
Telerik team
answered on 31 Mar 2009, 09:14 AM
Hello Teodorico,

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.
Tags
Grid
Asked by
Teodorico
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or