Resize grid on browser resize

This post describes how we got the grid to scroll properly when the web browser resizes. It consists of a few parts and three source code listings.

1. Problem description
2. Source code overview
3. Source code
- resizeGrid.js
- resizeGridNestedHTML.html
- resizeTable.html

Hope this isn't too long, but figured a summary would be useful. There were several related forum posts that lead to the solution shown here and a few with the same unanswered question.

1. PROBLEM DESCRIPTION
We are using the grid in our application pages. Certain areas of the application screens remain in a fixed position. For example, a header should appear at the top of the page and a footer should be visible at the bottom of the screen. A simple example is provided in resizeTable.html included at the end of this post.

The rest of the screen resizes and scrolls, if necessary, when the web browser is resized. For example, a list screen will show the entire list if there's room, but the list becomes a scrollable area if the web browser becomes too short to display the entire list.


Some other key words that might be useful for other forum searchers:
XML, XML data island, invisible grid, grid not showing up, scroll, scrollable, grid height

2. SOURCE CODE OVERVIEW
There are a few source code listings included at the end of this post. The HTML tables have colored borders so it is easier to identify the sections of the screens.

The XML, stylesheet, and JavaScript code is generated by a custom tag library. The HTML listing in resizeGridNestedHTML.html is a subset of that generated code, isolating the parts related to resizing. The tag library code was omitted to avoid additional complexity.

*** Be sure to update the paths for ***
*** grid.css, grid.js, and resizeGrid.js ***
*** to reflect your environment. ***

The source listings include:
resizeGrid.js - The JavaScript code that performs the resize calculations and adjusts the scrollable area to the available size. We applied this throughout our application before beginning to incorporate the data grid. We needed a solution that would work properly for our grid and non-grid screens.

resizeGridNestedHTML.html - The file with a solution that allows the grid to resize. The key part is the style on the table surrounding the data grid.

style="height:100%;table-layout: fixed;"

As Alex mentioned in another post, the table-layout: fixed; allows the JavaScript code (somewhere deep in grid.js) controlling the grid to properly perform some size-related calculation. Without it, the grid does not appear.

The height:100% allows the grid to fill the entire space allocated to the DIV and TABLE containing it. Without it, only the border of the table appears and the table (and the grid within it) never resizes.

The size calculation and resizing is done in the JavaScript included in resizeGrid.js.

resizeTable.html - A page without the grid that demonstrates the desired resizing behavior. Not real important, but proved useful as a simple starting point when researching the problem. Easier to examine the resize behavior, without the added complexity of the data grid.

SOURCE LISTING: resizeGrid.js

function adjustHeight() {
    // Calculate the height of the header.
    var headerHeight = 0;
    var header = document.getElementById("applicationHeader");

    if (header != null) {
        headerHeight = header.offsetHeight;
    }

    // Calculate the height of the footer section.
    var footerHeight = 0;
    var footer = document.getElementById("footer");
    if (footer != null) {
        footerHeight = footer.offsetHeight;
    }

    // Calculate the height of application components that are always visible.
    var applicationHeight = headerHeight + footerHeight;

    // Target height for the remainder of the screen is the browser height
    // minus the height of the fixed components.
    var targetHeight = document.body.clientHeight - applicationHeight;

    // Adjust the height of the scrollable segment.
    var scroller = document.getElementById("scroll");
    if (scroller != null) {
        targetHeight -= 30;
        window.status = "Scroll height to " + targetHeight + "=" + document.body.clientHeight + " clientHeight - " + applicationHeight + " (" + headerHeight + " headerHeight + " + footerHeight+ " footerHeight)";
        scroller.style.setExpression("height", targetHeight);
    }
}

window.onresize=adjustHeight;

SOURCE LISTING: resizeGridNestedHTML.html

<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<LINK rel="stylesheet"
    href="/afs/common/ActiveWidgets/runtime/styles/classic/grid.css"
    type="text/css">
<title>Example Resize Page Grid with Nested HTML</title>
<script src="/afs/common/ActiveWidgets/runtime/lib/grid.js"
    type="text/javascript"></script>
<script src="/afs/resizeGrid.js"
    type="text/javascript"></script>

</head>
<body onload="adjustHeight()">

<!-- header -->
<div id="applicationHeader">
<table border="1" bordercolor="red">
    <tr valign="top">
        <td>Fixed Header</td>
    </tr>
</table>
</div>


<!-- data -->
<div id="scroll">
<table style="height:100%;table-layout: fixed;">
<tr><td width="450px">
<xml id="dataGridXML"><rows>
  <row>
    <col tooltip="Hello?">Hello?</col>
    <col tooltip="Is">Is</col>
    <col tooltip="anyone">anyone</col>
    <col tooltip="home?">home?</col>
  </row>
  <row>
    <col tooltip="Nobody">Nobody</col>
    <col tooltip="here">here</col>
    <col tooltip="but us">but us</col>
    <col tooltip="chickens.">chickens.</col>
  </row>
  <row>
    <col tooltip="Hello?">Hello?</col>
    <col tooltip="Is">Is</col>
    <col tooltip="anyone">anyone</col>
    <col tooltip="home?">home?</col>
  </row>
  <row>
    <col tooltip="Nobody">Nobody</col>
    <col tooltip="here">here</col>
    <col tooltip="but us">but us</col>
    <col tooltip="chickens.">chickens.</col>
  </row>
  <row>
    <col tooltip="Hello?">Hello?</col>
    <col tooltip="Is">Is</col>
    <col tooltip="anyone">anyone</col>
    <col tooltip="home?">home?</col>
  </row>
  <row>
    <col tooltip="Nobody">Nobody</col>
    <col tooltip="here">here</col>
    <col tooltip="but us">but us</col>
    <col tooltip="chickens.">chickens.</col>
  </row>
  <row>
    <col tooltip="Hello?">Hello?</col>
    <col tooltip="Is">Is</col>
    <col tooltip="anyone">anyone</col>
    <col tooltip="home?">home?</col>
  </row>
  <row>
    <col tooltip="Nobody">Nobody</col>
    <col tooltip="here">here</col>
    <col tooltip="but us">but us</col>
    <col tooltip="chickens.">chickens.</col>
  </row>
  <row>
    <col tooltip="Hello?">Hello?</col>
    <col tooltip="Is">Is</col>
    <col tooltip="anyone">anyone</col>
    <col tooltip="home?">home?</col>
  </row>
  <row>
    <col tooltip="Nobody">Nobody</col>
    <col tooltip="here">here</col>
    <col tooltip="but us">but us</col>
    <col tooltip="chickens.">chickens.</col>
  </row>
  <row>
    <col tooltip="Hello?">Hello?</col>
    <col tooltip="Is">Is</col>
    <col tooltip="anyone">anyone</col>
    <col tooltip="home?">home?</col>
  </row>
  <row>
    <col tooltip="Nobody">Nobody</col>
    <col tooltip="here">here</col>
    <col tooltip="but us">but us</col>
    <col tooltip="chickens.">chickens.</col>
  </row>
  <row>
    <col tooltip="Hello?">Hello?</col>
    <col tooltip="Is">Is</col>
    <col tooltip="anyone">anyone</col>
    <col tooltip="home?">home?</col>
  </row>
  <row>
    <col tooltip="Nobody">Nobody</col>
    <col tooltip="here">here</col>
    <col tooltip="but us">but us</col>
    <col tooltip="chickens.">chickens.</col>
  </row>
  <row>
    <col tooltip="Hello?">Hello?</col>
    <col tooltip="Is">Is</col>
    <col tooltip="anyone">anyone</col>
    <col tooltip="home?">home?</col>
  </row>
  <row>
    <col tooltip="Nobody">Nobody</col>
    <col tooltip="here">here</col>
    <col tooltip="but us">but us</col>
    <col tooltip="chickens.">chickens.</col>
  </row>

</rows></xml>
<style id="dataGridStyle">
#dataGrid .active-column-0 {width:90px;}
#dataGrid .active-column-1 {width:90px;}
#dataGrid .active-column-2 {width:110px;}
#dataGrid .active-column-3 {width:110px;}
#dataGrid .active-grid-row {height: 20px;}
#dataGrid .active-row-cell {
    border: #0000ff 1px solid;
}
</style>
<script language="javascript">
var dataGridCols=new Array();
dataGridCols[0]='Response';
dataGridCols[1]='A Column';
dataGridCols[2]='Next Column';
dataGridCols[3]='Final Column';
var dataGridTable = new Active.XML.Table;
var xml=document.getElementById("dataGridXML");
dataGridTable.setXML(xml);
var dataGridObj=new Active.Controls.Grid;
dataGridObj.setId("dataGrid")
dataGridObj.setProperty("column/count",4);
dataGridObj.setColumnHeaderHeight("20px");
dataGridObj.setRowHeaderWidth("0px");
dataGridObj.setModel("data",dataGridTable);
dataGridObj.setColumnText(function (i) {return dataGridCols[i]});
dataGridTable.getTooltip = function(i, j){ var node = this.getNode(i, j);return node ? node.getAttribute("tooltip") : "";};
dataGridObj.setDataModel(dataGridTable);
dataGridObj.getColumnTemplate().setAttribute("title",function(){return this.getItemProperty("tooltip")});
document.write(dataGridObj);
</script>
</td></tr>
</table>
</div>

<!-- footer -->
<table id="footer" border="1" bordercolor="black">
    <tr>
        <td>Fixed Footer</td>
    </tr>
</table>
</body>
</html>

SOURCE LISTING: resizeTable.html

<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Example Resize Page of HTML Table</title>
<script src="/afs/resizeGrid.js" type="text/javascript"></script>

</head>
<body onload="adjustHeight()">

<!-- header -->
<div id="applicationHeader">
<table border="1" bordercolor="red">
    <tr valign="top">
        <td>Fixed Header</td>
    </tr>
</table>
</div>

<!-- data -->
<div id="scroll" style="overflow-y: auto;">
<table border="1" bordercolor="blue">
    <tr>
        <td>Hi,</td>
        <td>How</td>
        <td>are</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Fine,</td>
        <td>thanks.</td>
        <td>And</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Hi,</td>
        <td>How</td>
        <td>are</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Fine,</td>
        <td>thanks.</td>
        <td>And</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Hi,</td>
        <td>How</td>
        <td>are</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Fine,</td>
        <td>thanks.</td>
        <td>And</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Hi,</td>
        <td>How</td>
        <td>are</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Fine,</td>
        <td>thanks.</td>
        <td>And</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Hi,</td>
        <td>How</td>
        <td>are</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Fine,</td>
        <td>thanks.</td>
        <td>And</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Hi,</td>
        <td>How</td>
        <td>are</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Fine,</td>
        <td>thanks.</td>
        <td>And</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Hi,</td>
        <td>How</td>
        <td>are</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Fine,</td>
        <td>thanks.</td>
        <td>And</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Hi,</td>
        <td>How</td>
        <td>are</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Fine,</td>
        <td>thanks.</td>
        <td>And</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Hi,</td>
        <td>How</td>
        <td>are</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Fine,</td>
        <td>thanks.</td>
        <td>And</td>
        <td>you?</td>
    </tr>
    <tr>
        <td>Hi,</td>
        <td>How</td>
        <td>are</td>
        <td>you?</td>
    </tr>
</TABLE>
</div>

<!-- footer -->
<table id="footer" border="1" bordercolor="black">
    <tr>
        <td>Fixed Footer</td>
    </tr>
</table>
</body>
</html>

Craig,

Thanks for a thorough post. I just want to point out that table around the grid is not necessary for your implementation, though one might conclude from your post that it is.

In your code, try removing table, tr and td wrapping the grid and change the div tag like this: <div id="scroll" style="width:450px"> - you'll see no changes in the behaviour.

Best,

hi ,

I want to decrease the height of the grid after removing the data from my grid through javascript dynamically and I am using 1.0 version.

can anybody help??

cheers,
sunil.

Hi,
on the similar lines, i would like to resize the website contents to fit the screen resolution of the client pc.

can anybody help??

gaurav.

Hi Everybody,

I am having an issue. i.e., I am using the pagination with grid control.I mean, when i select say 50 in my combo(pagination), i need to set the height of grid accordingly.Similarly, when i select say 100 in my combo(pagination) the grid has to increase accordingly.

I tried with the logic as,
var rowHeight = obj.getRowHeight();
var records; (getting from my db(mysql) )

gridHeight = rowHeight * records;
if(records >=50)
obj.setControlSize(x,y); // where x is some int value & y is gridHeight.

This code is working fine to display for 40 rows.If it is more, then the grid height is increased accordingly but all rows are not displayed.

Note: I dont want to display the scrollbars in the grid.


Can anyone help me out. Thanks in advance.

Hi Guys,

I have an issue when i am trying for div center using javascript.
Can anyone help me to div center using javasript. I can do it easily using CSS, however i need to do this using javascript. I would appreciate if anyone could help me. Thanks in advance.

Jayaprakash
Wednesday, August 29, 2007