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

Radgrid off the screen in IE on resizing window

6 Answers 144 Views

Grid

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

Elena Fernández asked on 28 Jun 2010, 07:38 PM

Hi,
I've been searching the forum and the internet for hours now and saw loads of people having the same problem, but none of the solutions offered to them worked for me, so I'd appreciate your help.

I have a splitter which divides my screen into two different parts and on the left have a sliding pannel and on the right pannel I load different external pages. One of them has a Radgrid control which fits nicely on screen...until I pin out the sliding pannel and pin it back in, move the splitter or resize window. In all these cases, when restoring to normal size my radgrid is completally off the screen to the right, even outside the components containers. All this happens only in IE, it seems to work fine in Firefox...but I need it working in IE too.

I've tried everything and from what I've seen, I thik I need to repaint my radgrid when the pannel is resized... My problem is, I'm able to detect when the pannel is resized outside the scope of where the grid is...I mean...I'm not able to detect the resizing inside the page where the radgrid is contained.

Some help would be highly appreciated as I've been with this problem for hours now and don't know what else to try..
Thanking you in Advance
Efg
PS: In fact not only the radgrid expands and gets off the screen boundaries...but its parent table too.

6 Answers, 1 is accepted

answered on 29 Jun 2010, 12:53 PM

Hi Elena,

Which version of RadControls are you using? Can you modify the example below (which works as expected) until the problem is reproduced and send it back for further inspection?

<%@ Page Language="C#" %>

<%@ 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 = 4;

int rowsNum = 20;

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 runat="server">

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

<title>RadControls</title>

<style type="text/css">

html,

body,

form

{

height:100%;

margin:0;

padding:0;

}

</style>

</head>

<body>

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

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

<telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" Orientation="Vertical" Skin="Office2007">

<telerik:RadPane ID="PadPane1" runat="server" Width="20px" Scrolling="None">

<telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="20px">

<telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Width="200px" Title="Sliding Pane">

RadSlidingPane1 here

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" />

<telerik:RadPane ID="RadPane2" runat="server">

<telerik:RadGrid

ID="RadGrid1"

runat="server"

Height="100%"

Skin="Office2007"

style="border:0;outline:none"

AllowFilteringByColumn="true"

AllowPaging="true"

OnNeedDataSource="RadGrid_NeedDataSource">

<ClientSettings>

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

</ClientSettings>

<MasterTableView TableLayout="Fixed" />

</telerik:RadGrid>

</telerik:RadPane>

</telerik:RadSplitter>

</form>

</body>

</html>

Best wishes,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

answered on 30 Jun 2010, 12:57 PM

Hi again,
I have been playing with your sample and I'm able to reproduce the problem (your grid appears squashed and even though I'm setting the scroll percentage higher still can't see it, but that's not important, you will be able to see the grid in step 3 (i move along pressing the back and next buttons as in my program I only have the tab on focus enabled but didnt know how to do this i C# (I'm using Vb).
So, if you pin pannel, the grid is totally off the screen and the radpage.

My version of the Telerik dll I think it is 2010.1.519.35 (or that's what I get right clicking on it in windows explorer)

Your modified code is the following:

@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

@ 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 = 4;

int rowsNum = 20;

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;

}

protected void backButton_Click(object sender, EventArgs e)

{

int selectedIndex = RadTabStrip1.SelectedIndex;

//Go to previous tab

int nGotoTabNumber = selectedIndex - 1;

RadTabStrip1.SelectedIndex = nGotoTabNumber;

RadMultiPage1.SelectedIndex = nGotoTabNumber;

}

protected void nextButton_Click(object sender, EventArgs e)

{

int selectedIndex = RadTabStrip1.SelectedIndex;

//Go to next tab

int nGotoTabNumber = selectedIndex + 1;

RadTabStrip1.SelectedIndex = nGotoTabNumber;

RadMultiPage1.SelectedIndex = nGotoTabNumber;

}

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">

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

title>RadControls</title>

style type="text/css">

html

body

form

{

height:100%;

margin:0;

padding:0;

}

style>

head>

body>

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

asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="false" />

telerik:RadSplitter ID="RadSplitter1" runat="server" Width="100%" Height="100%" Orientation="Vertical" Skin="Office2007">

<telerik:RadPane ID="PadPane1" runat="server" Width="20px" Scrolling="None">

<telerik:RadSlidingZone ID="RadSlidingZone1" runat="server" Width="20px">

<telerik:RadSlidingPane ID="RadSlidingPane1" runat="server" Width="200px" Title="Sliding Pane">

RadSlidingPane1 here

</telerik:RadSlidingPane>

</telerik:RadSlidingZone>

</telerik:RadPane>

<telerik:RadSplitBar ID="RadSplitBar1" runat="server" />

<telerik:RadPane ID="RadPane2" runat="server">

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" Skin="WebBlue" MultiPageID="RadMultiPage1">

<Tabs>

<telerik:RadTab Text="Step 1" Selected="True">

</telerik:RadTab>

<telerik:RadTab Text="Step 2">

</telerik:RadTab>

<telerik:RadTab Text="Step 3">

</telerik:RadTab>

<telerik:RadTab Text="Step 4">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<asp:Panel ID="Panel1" runat="server" Width="99%" Height="290" BorderColor="#999999" BorderStyle="Solid" BorderWidth="1px">

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">

<telerik:RadPageView ID="RadPageView1" runat="server">

<table>

<tr>

</tr>

<tr>

<asp:Button ID="btnNext1" runat="server" Text="Next" OnClick="nextButton_Click" Css/>

</td>

</tr>

</table>

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView2" runat="server">

<table>

<tr>

</tr>

<tr>

<asp:Button runat="server" ID="btnPrev2" OnClick="backButton_Click" Text="Back" Css />

</td>

<asp:Button ID="btnNext2" runat="server" Text="Next" onclick="nextButton_Click" Css/>

</td>

</tr>

</table>

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView3" runat="server" width="100%">

<tr>

</tr>

<tr>

<telerik:RadGrid

ID="RadGrid1"

runat="server"

Height="100%"

Skin="WebBlue"

style="border:0;outline:none"

AllowFilteringByColumn="true"

AllowPaging="true"

OnNeedDataSource="RadGrid_NeedDataSource">

</ClientSettings>

</telerik:RadGrid>

</td>

</tr>

<tr>

<asp:Button runat="server" ID="btnBack3" OnClick="backButton_Click" Text="Back" Css />

</td>

<asp:Button ID="btnNext3" runat="server" Text="Next" onclick="nextButton_Click" Css/>

</td>

</tr>

</table>

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView4" runat="server">

<table>

<tr>

</tr>

<tr>

<asp:Button ID="btnBack4" runat="server" Css

OnClick="backButton_Click" Text="Back" />

</td>

<td>

 </td>

Finished

</td>

</tr>

</table>

</telerik:RadPageView>

</telerik:RadMultiPage>

</asp:Panel>

</telerik:RadPane>

telerik:RadSplitter>

form>

body>

Thanks for your help
Efg

Accepted

answered on 01 Jul 2010, 08:47 AM

Hi Elena,

In order to provide better formatted code snippets, please use the "format code block" tool of the editor you are writing in.

In your implementation the RadGrid is placed in a table with automatic layout, which means that it expands as much as required to enclose its content. On the other hand, the RadGrid control uses Javascript calculations to set the width of its header and data areas, because static headers are enabled. When expanding the sliding pane, the <table> around RadGrid does not shrink, so the RadGrid does not shrink either. Please set style="table-layout:fixed" to this table.

On a side note, the problem with the RadGrid height is caused by the fact that a W3C CSS requirement is violated - elements with percentage height should have parents with explicit heights. The parent in this case is a table cell. The rule is applied recursively until an element with a pixel height is reached, or until the <html> element is reached. I personally suggest you to remove the <table> completely, as using tables for layout is rather old-fashioned and should be used only is specific cases when another approach is impossible or too hard to implement.

Best wishes,
Dimo
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Radgrid off the screen in IE on resizing window

6 Answers, 1 is accepted