Resizing Grid Using JavaScript
We're experimenting with the data grid in our application. Using the documentation and these forums we have been able to get the desired behavior for our proof of concept. Only a couple issues remain. Here's one of them.
I've include a sample HTML page that is a simplified version of what we are attempting. Our pages have some sections that should always be visible to the user. Call them fixed sections. My example uses a header and a footer.
Whatever is not used by the fixed sections is available to display the rest of the page. We use JavaScript to dynamically resize this section whenever the page loads or is resized. So, as the page shrinks the header and footer will remain visible, but the dynamically resizing section gets a scroll bar when it no longer fits in the page.
When I place a data grid in this dynamically resizing section, I have not been able to get it to resize using JavaScript. I've found a few ideas in the forums, but haven't been able to make it work properly.
Some other notes:
- We will not use frames for the fixed sections, so that is not an option.
- We are only supporting IE 5.5 and above.
- We are using the XML data model of the grid.
- It must resize when the page is resized. We don't want to require the user to resize the grid using the mouse. There's an impressive tool to do that, but it doesn't meet our needs.
Any ideas or insights would be appreciated.
Thanks
--
Craig
I've include a sample HTML page that is a simplified version of what we are attempting. Our pages have some sections that should always be visible to the user. Call them fixed sections. My example uses a header and a footer.
Whatever is not used by the fixed sections is available to display the rest of the page. We use JavaScript to dynamically resize this section whenever the page loads or is resized. So, as the page shrinks the header and footer will remain visible, but the dynamically resizing section gets a scroll bar when it no longer fits in the page.
When I place a data grid in this dynamically resizing section, I have not been able to get it to resize using JavaScript. I've found a few ideas in the forums, but haven't been able to make it work properly.
Some other notes:
- We will not use frames for the fixed sections, so that is not an option.
- We are only supporting IE 5.5 and above.
- We are using the XML data model of the grid.
- It must resize when the page is resized. We don't want to require the user to resize the grid using the mouse. There's an impressive tool to do that, but it doesn't meet our needs.
Any ideas or insights would be appreciated.
Thanks
--
Craig
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<LINK rel="stylesheet"
href="/ActiveWidgets/runtime/styles/classic/grid.css"
type="text/css">
<title>Example Resize Page</title>
<script src="/ActiveWidgets/runtime/lib/grid.js"
type="text/javascript"></script>
<script>
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;
// Attempt to resize using the style sheet.
// Doesn't appear to work.
var stylesheet = document.styleSheets[document.styleSheets.length-1];
var pixHeight = targetHeight + "px";
if (stylesheet.id.indexOf("Grid") > 0) {
stylesheet.addRule(stylesheet.id, 'HEIGHT: ' + pixHeight + ';');
}
// Here are a couple other things I tried, mostly grasping in the dark.
// Attempt to resize the Grid object. Not sure what the correct syntax is.
// alert("gridObj.setProperty(height, " + pixHeight + ")");
gridObj.setProperty("height",pixHeight);
// alert("gridObj.style.height=" + pixHeight);
// gridObj.style.height=pixHeight;
// alert("gridObj.style.setExpression(height, " + pixHeight + ")");
// gridObj.style.setExpression("height", pixHeight);
}
window.onresize=adjustHeight;
</script>
</head>
<body onload="adjustHeight()">
<!-- header -->
<div id="applicationHeader">
<table width="98%" align="center">
<tr valign="top">
<td>Fixed Header</td>
</tr>
</table>
</div>
<!-- data -->
<table>
<tr>
<td>
<form name="theForm">
<xml id="dataGridXML">
<rows>
<row>
<col tooltip="Hi,">
Hi,
</col>
<col tooltip="How">
How
</col>
<col tooltip="are">are</col>
<col tooltip="you?">
you?
</col>
</row>
<row>
<col tooltip="Hi,">
Hi,
</col>
<col tooltip="How">
How
</col>
<col tooltip="are">are</col>
<col tooltip="you?">
you?
</col>
</row>
<row>
<col tooltip="Hi,">
Hi,
</col>
<col tooltip="How">
How
</col>
<col tooltip="are">are</col>
<col tooltip="you?">
you?
</col>
</row>
<row>
<col tooltip="Hi,">
Hi,
</col>
<col tooltip="How">
How
</col>
<col tooltip="are">are</col>
<col tooltip="you?">
you?
</col>
</row>
<row>
<col tooltip="Hi,">
Hi,
</col>
<col tooltip="How">
How
</col>
<col tooltip="are">are</col>
<col tooltip="you?">
you?
</col>
</row>
<row>
<col tooltip="Hi,">
Hi,
</col>
<col tooltip="How">
How
</col>
<col tooltip="are">are</col>
<col tooltip="you?">
you?
</col>
</row>
<row>
<col tooltip="Hi,">
Hi,
</col>
<col tooltip="How">
How
</col>
<col tooltip="are">are</col>
<col tooltip="you?">
you?
</col>
</row>
<row>
<col tooltip="Hi,">
Hi,
</col>
<col tooltip="How">
How
</col>
<col tooltip="are">are</col>
<col tooltip="you?">
you?
</col>
</row>
<row>
<col tooltip="Hi,">
Hi,
</col>
<col tooltip="How">
How
</col>
<col tooltip="are">are</col>
<col tooltip="you?">
you?
</col>
</row>
<row>
<col tooltip="Hi,">
Hi,
</col>
<col tooltip="How">
How
</col>
<col tooltip="are">are</col>
<col tooltip="you?">
you?
</col>
</row>
</rows>
</xml>
<style id="dataGridStyle">
#dataGridStyle {
width: 850px;
height: 300px;
}
#dataGridStyle.active-column-0 {
width: 40px;
}
#dataGridStyle.active-column-1 {
width: 110px;
}
#dataGridStyle.active-column-2 {
width: 60px;
}
#dataGridStyle.active-column-3 {
width: 80px;
}
#dataGridStyle.active-grid-row {
height: 40px;
}
#dataGridStyle.active-scroll-left.active-list-item {
height: 50px
}
#dataGridStyle.active-scroll-top.active-box-image {
height: 50%
}
</style>
<script language="javascript">
var dataCols=new Array();
dataCols[0]='This';
dataCols[1]='That';
dataCols[2]='The';
dataCols[3]='Other';
var dataTable = new Active.XML.Table;
var xml=document.getElementById("dataGridXML");
dataTable.setXML(xml);
var gridObj=new Active.Controls.Grid;
gridObj.setId("dataGridStyle");
gridObj.setProperty("column/count",4);
gridObj.setColumnHeaderHeight("40px");
gridObj.setRowHeaderWidth("0px");
var rowColor = function(){return this.getProperty("row/order") % 2 ? "transparent" : "gray";}
var dataRow = new Active.Templates.Row;
dataRow.setStyle("background", rowColor);
gridObj.setTemplate("row", dataRow);
gridObj.setModel("data",dataTable);
gridObj.setColumnText(function (i) {return dataCols[i]});
dataTable.getTooltip = function(i, j){ var node = this.getNode(i, j);return node ? node.getAttribute("tooltip") : "";};
gridObj.setDataModel(dataTable);
gridObj.getColumnTemplate().setAttribute("title",function(){return this.getItemProperty("tooltip")});
gridObj.sort(1,'ascending');
document.write(gridObj);
adjustHeight();
</script>
</TABLE>
</td>
</tr>
</table>
</form>
<!-- footer -->
<table id="footer" width="98%" align="center" border="0">
<tr>
<td>Fixed Footer</td>
</tr>
</table>
</div>
</body>
</html>Craig
April 15,