<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>
This topic is archived.