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

Grid Height Not Covering the Page

devashish — Mon, 02 Mar 2015 06:53:12 GMT

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.

Grid Height Not Covering the Page

yudi@intersoftpt.com — Mon, 02 Mar 2015 03:57:38 GMT

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

Grid Height Not Covering the Page

Jitendra — Fri, 27 Feb 2015 16:11:58 GMT

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.

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

Grid Height Not Covering the Page

yudi — Thu, 13 Mar 2014 22:25:26 GMT

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.

Grid Height Not Covering the Page

devashish — Thu, 13 Mar 2014 05:40:34 GMT

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.

Grid Height Not Covering the Page

yudi — Mon, 10 Mar 2014 22:47:52 GMT

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.

Grid Height Not Covering the Page

devashish — Mon, 10 Mar 2014 01:21:23 GMT

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

Grid Height Not Covering the Page

yudi — Sun, 09 Mar 2014 22:25:26 GMT

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.

Grid Height Not Covering the Page

devashish — Fri, 07 Mar 2014 02:40:42 GMT

Hi Yudi,

Any Updates?

Grid Height Not Covering the Page

yudi — Wed, 05 Mar 2014 20:03:54 GMT

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.

Grid Height Not Covering the Page

devashish — Sun, 02 Mar 2014 01:57:32 GMT

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%

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

DefaultStyleMode="Elegant" Height="100%" UseDefaultStyle="True" Width="100%"

DataSourceID="AccessDataSource1">