Intersoft Solutions - Community - WebGrid Enterprise - Grid Height Not Covering the Page

With_Parent_DIV having_height_equal_to_100.jpg

Dev AshishMember

Posted: March 3, 2014 1:41 AM in response to Yudi

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

2 attachments

Without_Parent_DIV_having_height_equal_to_100.jpg

Yudi Member

Posted: March 3, 2014 9:48 PM in response to Dev Ashish

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.

Dev AshishMember

Posted: March 4, 2014 1:47 AM in response to Yudi

Hi Yudi,

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>

<title>Untitled Page</title>

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>

</head>

<p>Here is some content for the page. Like header for which i have to give fixed height.</p>

</div>

<ISWebGrid:WebGrid ID="AvailableGrid" runat="server" RenderingMode="HTML5" DefaultStyleMode="Elegant" Height="100%" UseDefaultStyle="True" Width="100%" DataSourceID="AccessDataSource1">

</LayoutSettings>

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

</div>

</form>

</body>

</html>

1 attachment

Yudi Member

Posted: March 5, 2014 8:03 PM in response to Dev Ashish

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.

Dev AshishMember

Posted: March 7, 2014 2:40 AM in response to Yudi

Hi Yudi,

Any Updates?

Yudi Member

Posted: March 9, 2014 10:25 PM in response to Dev Ashish

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

Hope this helps.

Dev AshishMember

Posted: March 10, 2014 1:21 AM in response to Yudi

Hi Yudi,

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.

Regards,

Dev

1 attachment

Yudi Member

Posted: March 10, 2014 10:47 PM in response to Dev Ashish

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.

Dev AshishMember

Posted: March 13, 2014 5:40 AM in response to Yudi

Hi Yudi,

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.

Yudi Member

Posted: March 13, 2014 10:25 PM in response to Dev Ashish

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.

Jitendra KumarMember

Posted: February 27, 2015 4:11 PM in response to Dev Ashish

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.

Regards,

Jitendra

Yudi Support

Posted: March 2, 2015 3:57 AM in response to Jitendra Kumar

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

Dev AshishMember

Posted: March 2, 2015 6:53 AM in response to Jitendra Kumar

Hi Jitendra

As Yudi said use the DoResize() method on Grid resize, I am doing the same on window resize as shown below. But you have to trigger the javascript code I have given in my last post every time you resize the window.

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.