Hi.
I've tried setting a grid to 100% height. But whenever i do that, the scrollbars disappear and the grid is way to big for the frame it's placed inside. Actually it's placed inside a div, which is placed inside a frame.
Do I really have to handle the height size manually, this is very tedious?
Hello,
Can you please post the markup of the page?
Also, which browser are you experiencing this.
This is experienced in IE9. The program I'm handling right now has IE9 issues, so this has to work here. The same setup works just fine with a UltraWebGrid, but this grid does not work with IE9 (unless qirks mode is enabled).
Below is the page code. The grid itself is placed inside an usercontrol, which is added to panelGrid.
<%@ Page language="c#" Codebehind="MainTask.aspx.cs" AutoEventWireup="True" Inherits="Orion.WebForms.MainTask" %>
<%@ Register Assembly="Infragistics35.WebUI.UltraWebNavigator.v10.3, Version=10.3.20103.2120, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.WebUI.UltraWebNavigator" tagprefix="ignav" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD runat="server">
<title>MainTask</title>
<meta content="Microsoft Visual Studio 7.0" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<LINK href="../main.css" type="text/css" rel="stylesheet">
<script language="JavaScript" src="../JavaScript/MainTask.js"></script>
<script>
var resizer;
function resizenow() // onresize="resizeend();"
{
window.document.fDoSomething.location.href = "DoSomething.aspx?action=ResizeMain&mainheight="+document.body.clientHeight+
"&mainwidth="+document.body.clientWidth+
"&width="+window.top.document.body.clientWidth+
"&height="+window.top.document.body.clientHeight;
}
function resizeend()
clearTimeout(resizer);
resizer = setTimeout('resizenow();', 500);
function init()
StartTimer();
</script>
</HEAD>
<body bottomMargin="0" leftMargin="0" topMargin="0" scroll="no" onload="StartTimer();"
onresize="resizeend();" rightMargin="0">
<form id="MainTask" method="post" runat="server">
<TABLE id="Table2" height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<TD>
<DIV class="topBare" style="WIDTH: 100%; POSITION: relative; HEIGHT: 38px" ms_positioning="GridLayout">
<ignav:ultrawebmenu id="topMenu"
!content cut
</ignav:ultrawebmenu><asp:textbox id="TextBox1" style="Z-INDEX: 102; LEFT: 520px; POSITION: absolute; TOP: 0px" runat="server"
Height="20px" Width="256px" Visible="False"></asp:textbox></DIV>
</TD>
</TR>
<TR style="HEIGHT: 100%">
<TD vAlign="top">
<DIV id="panelGrid" runat="server" ms_positioning="FlowLayout">
</DIV>
<%-- <DIV id="DIV1" style="OVERFLOW: auto" runat="server" ms_positioning="FlowLayout">
--%> </TD>
</TABLE>
<INPUT id="SelectedTaskID" type="hidden" value="0" name="SelectedTaskID" runat="server" />
<script language="javascript">selectedTaskID = document.all('SelectedTaskID').value;</script>
<iframe style="VISIBILITY: hidden; WIDTH: 0px; HEIGHT: 0px" name="fDoSomething" src="about:blank"
frameBorder="1"></iframe>
</form>
</body>
</HTML>
Hi SteenPedersen,
This would be expected behavior as by setting the height and width properties to 100% the grid sizes itself accordingly and the scrollbars wouldn't be available.
An alterntive approach that may be worth checking out, is to use the IG WebSplitter control. By this approach I believe you will have all the functionality of the frame (and more). You will be able to put you grid inside a panel, set the grid height and width to 100% such that it sizes itself to the panel size, and the WebSplitter will give you the scrollbars.
I have attached a demo for you review.
Please let me know if I can be of any further assistance regarding this matter.
Hello SteenPedersen,
Please let me know if you need any further assistance regarding this matter.
You can specify the Height and width of the WebDataGrid in the javascript using the following code.
var grid = $find("WebDataGrid1"); grid.get_element().style.height = "500px"; grid.get_element().style.width= "500px";
Please let me know if you have any further questions regarding this matter.
It would be nice to know how to do the sizing in javascript. All my attempts have been without succes. For know, the solution requires a postback, something which isn't very pleasing to look at.
I really think that the grid should have a"dock to parent" parameter or simular, which accomplished this behaviour. From the posts within this forum i can tell that I'm not the only one with this problem.
Please let me know if you need any additional assistance regarding this matter.
I will refer you to this forum thread which discusses what you are inquiring about: http://community.infragistics.com/forums/p/25371/93367.aspx
Let me know if you have any additional questions regarding this matter.