iSeller Commerce
iSeller POS Retail
iSeller POS F&B
iSeller POS Express
Crosslight
WebUI
ClientUI
What's New
Download Trial
Web Solution
Mobile Solution
Enterprise Solution
Custom Development
Blog
Community
Latest Development Blogs
ForumPostTopic
Browse By Tag
Hi,
I am facing problem with grid height not covering the page i.e. I am not able to get the footer at the bottom of the page.
If I give the Parent div height as 100% the grid takes the height of the parent and neglect the header then it exceeds the page where footer becomes hidden.
If I don’t give any height to parent the footer sticks with last row in the table.
AutoHeight attribute of the WebGrid does not seems to work.
I am using doctype HTML5 in IE 10 and IE 11.
Regards,
Dev
With Parent DIV having height equal to 100%
<div id="test" style="height: 100%">
<ISWebGrid:WebGrid ID="AvailableGrid" runat="server" RenderingMode="HTML5"
DefaultStyleMode="Elegant" Height="100%" UseDefaultStyle="True" Width="100%"
DataSourceID="AccessDataSource1">
Without Parent DIV having height equal to 100%
<div id="test"> <ISWebGrid:WebGrid ID="AvailableGrid" runat="server" RenderingMode="HTML5"
I created a simple page of WebGrid based on your description. The page uses html5 doctype with full size WebGrid (height and width properties are set to 100%). The snippet is code is as follow:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FullSizeWebGrid.aspx.cs" Inherits="FullSizeWebGrid" %> <%@ Register Assembly="ISNet.WebUI.WebGrid" Namespace="ISNet.WebUI.WebGrid" TagPrefix="ISWebGrid" %> <!doctype html> <html> <head runat="server"> <title>Full Size WebGrid Page</title> <style type="text/css"> html, body, form { height: 100%; width: 100%; padding: 0; margin: 0; } </style> </head> <body> <form id="form1" runat="server"> <div style="height: 100%;"> <ISWebGrid:WebGrid ID="WebGrid1" runat="server" Height="100%" Width="100%" DataSourceID="AccessDataSource1"> <RootTable DataKeyField="CustomerID"> ... </RootTable> </ISWebGrid:WebGrid> <asp:AccessDataSource ID="AccessDataSource1" runat="server" ...> </asp:AccessDataSource> </div> </form> </body> </html>
For your information, I’m using WebGrid 8 build 256 and WebUI.NET Framework build 910.
This should help.
Hi Yudi,
It looks like in question above I forget to mention that I have a header in my page with a fixed height of 100px.
Also the images I uploaded earlier are also not opening and the images I am trying to load this time are getting distorted.
Regards,Dev
I made a minor modification to the prior sample by using absolute positioning approach in order to add a header with fixed height of 100px and fill the remaining space for the content.
Add following css.
<style type="text/css"> html, body, form { height: 100%; width: 100%; padding: 0; margin: 0; } .row, .col { overflow: hidden; position: absolute; } .row { left: 0; right: 0; } .col { top: 0; bottom: 0; } .scroll-x { overflow-x: auto; } .scroll-y { overflow-y: auto; } .header.row { height: 100px; top: 0; } .body.row { top: 100px; bottom: 0; } </style>
And use the structure as shown below.
<div class="header row"> <h2>Header in here</h2> </div> <div class="body row scroll-y"> <ISWebGrid:WebGrid ID="WebGrid1" runat="server" Height="100%" Width="100%" ...> ... </ISWebGrid:WebGrid> </div>
The result will look like this.
Hope this helps.
Thanks for your reply.
Here is the code I am using please do have a look as it is not giving the desired output.
When the number of rows increases two scrollbar are coming in.
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SimpleDesktop.aspx.vb" Inherits="DT.V21.Web.SimpleDesktop" %>
<%@ Register Assembly="ISNet.WebUI.WebGrid" Namespace="ISNet.WebUI.WebGrid" TagPrefix="ISWebGrid" %>
<!DOCTYPE HTML>
<html style="height: 100%">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
html, body, form
{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
.row, .col
overflow: hidden;
position: absolute;
.row
left: 0;
right: 0;
.col
top: 0;
bottom: 0;
.scroll-x
overflow-x: auto;
.scroll-y
overflow-y: auto;
.header.row
height: 100px;
.body.row
top: 100px;
</style>
</head>
<body id="body" runat="server" style="height: 100%">
<form id="form1" runat="server" style="height: 100%">
<div class="header row">
<p>Here is some content for the page. Like header for which i have to give fixed height.</p>
</div>
<div id="test" class="body row scroll-y">
<ISWebGrid:WebGrid ID="AvailableGrid" runat="server" RenderingMode="HTML5" DefaultStyleMode="Elegant" Height="100%" UseDefaultStyle="True" Width="100%" DataSourceID="AccessDataSource1">
<LayoutSettings ColumnHeaders="Default" StatusBarVisible="True" TreeLines="False" AllowAddNew="No" AllowDelete="No" AllowEdit="No" AllowContextMenu="false" PersistRowChecker="true" AllowMultipleSelection="Yes" InProgressUIBehavior="ChangeCursorToHourGlass">
<TextSettings UseWebResources="true" Language="UseCulture"></TextSettings>
</LayoutSettings>
<RootTable DataKeyField="CustomerID">
<Columns>
<ISWebGrid:WebGridColumn Caption="CustomerID" DataMember="CustomerID" DataType="System.Int32" Name="CustomerID" Width="100px"></ISWebGrid:WebGridColumn>
<ISWebGrid:WebGridColumn Caption="CompanyName" DataMember="CompanyName" Name="CompanyName" Width="100px"></ISWebGrid:WebGridColumn>
<ISWebGrid:WebGridColumn Caption="ContactName" DataMember="ContactName" Name="ContactName" Width="100px"></ISWebGrid:WebGridColumn>
<ISWebGrid:WebGridColumn Caption="City" DataMember="City" Name="City" Width="200px"></ISWebGrid:WebGridColumn>
</Columns>
</RootTable>
</ISWebGrid:WebGrid>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Themes/Northwind.mdb" SelectCommand="SELECT * FROM [Customers]"></asp:AccessDataSource>
</form>
</body>
</html>
Thank you for the prompt reply.
I will have this forwarded to the WebGrid development team to be investigated further. I will keep you updated with any news from the team regarding this.
Any Updates?
I have my grid to show 830 rows and I found that if I removes the scroll-y css class from the div element which wrap the WebGrid, the ‘two scrollbar’ problem is no longer persist.
...<div class="body row"> <ISWebGrid:WebGrid ID="WebGrid1" runat="server" ...> ... </ISWebGrid:WebGrid> </div> ...
I tried removing scroll-y CSS class but now the footer/status bar is not visible.
And I am not able to upload images here. No matter how many times I tried the result is same.
I uploaded my simple sample in http://1drv.ms/1cLaU6y. Within the FullHeightWebGrid.zip file, I added the snapshots which show how the sample page is rendered in various browsers. Everything worked smoothly and I was unable to reproduce the “footer/status bar is not visible” problem.
Please have the sample evaluated at your end and let me know if you have different result.
For your information, I’m using WebGrid 8 build 256 and WebUI.NET Framework 3.0 build 910.
Sorry for delay in reply.
I tried you code. It’s still not working according to requirement.
I have written a JavaScript function OnLoad event which is changing the grid table height dynamically to fix this problem.
var grid = ISGetObject(controlId); var divRootTableEl = GetRootTableElement(controlId); divRootTableEl.style.height = grid.parentElement.clientHeight – siblingHeight(grid)+ "px";
Where siblingHeight() calculates the height of other elements under grid parent division.
Glad to hear that the JavaScript function in OnLoad event helps.
Should you need further assistance or run into any problems regarding our controls, feel free to post it into our forum. We would be happy to assist you again.
Hi Dev,
I am using version 9.0
I am facing the same issue and able to fix the height as full screen by above mentioned applied CSS. But it is creating problem on Chrome on resizing. Footer is not showing which I am using after Grid section.
I am thinking that your solution with dynamic height using Javascript mentioned above will work for me. Could you please give me the detail script implementation with the calculation of Child node.
OR
Is there any way so that I can remove the Vertical scrollbar. To set AutoHeight = "True", it is taking full height as per Grid contents but it is not working same for IE7. Solution for this would be more usefull for me.
Appreciate your response.
Jitendra
... But it is creating problem on Chrome on resizing. Footer is not showing which I am using after Grid section.
Try to set the Height and Width property of WebGrid to 100% instead of enabling AutoHeight and/or AutoWidth. If this still doesn't help, you can try to invoke DoResize() method of WebGrid when the grid is resized.
function OnResize() { var WebGrid1 = ISGetObject("WebGrid1"); wgDoResize(true, true); return true; }
Please feel free to let us know whether this helps or not.
if(window.addEventListener)window.addEventListener('resize', ResizeWindow, false); else if(window.attachEvent) window.attachEvent('onresize', ResizeWindow);
Where ResizeWindow will calls the DoResize() and the code in my last post.
Please do take Yudi's help more than me as he can always get in touch with developer's.
or
Choose this if you're already a member of Intersoft Community Forum. You can link your OpenID account to your existing Intersoft Social ID.
Choose this if you don't have an Intersoft account yet. Your authenticated OpenID will be automatically linked to your new Intersoft account.
Enter your Wordpress Blogname