Should I be able to embed the grid within a table? It doesn't render any of the columns, or renders them really strange with this code:
<html>
<head>
<title>
test
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles/guistyle.css" rel="stylesheet" type="text/css" />
<!-- calendar stylesheet -->
<link rel="stylesheet" type="text/css" media="all" href="activeui/runtime/classic/activeui.css" />
<script language="JavaScript" src="activeui/runtime/activeui.js">_</script>
<!-- The only script included directly on the page should be variables where the
value has to come from the XSL transformation. These variables can then be
used by the page specific script include above. -->
<style>
#grid1 {height: 80px; width: 500; border: 2px inset; background: white}
#grid1
.active-controls-grid {height: 100%; font: menu;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}
.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-column-1 {width: 200px; background-color: threedlightshadow;}
</style>
<script language="JavaScript">
var myName = "PadListAction";
var focusField = "F105003";
var F105003 = "465";
var F105164 = "1";
var F15003 = "12";
var updateMsg = "Updating";
</script>
</head>
<body>
<form name="padForm" method="post" action="MaintPadAction.do">
<table id="viewtable" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table cellpadding="2" cellspacing="0" width="100%">
<tr>
<td>Company: 465
</td>
<td>Fund: 1
</td>
<td>Account: 12
</td>
<td>Short name
</td>
</tr>
</table>
<table width="100%" id="grouptable">
<span>test caption</span>
<tr>
<td align="center">
<script>
var datalist = [["001", "001", "7", "01/08/2003", "", "N", "50.05", "121000358", "Bank of America, National Association", "648500112"],
["002", "002", "5", "01/10/2003", "01/10/2003", "A", "50.05", "121000358", "Bank of America, National Association", "648500112"],
["003", "003", "8", "01/10/2003", "01/10/2003", "N", "50.50", "121000358", "Bank of America, National Association", "648500112001"],
["004", "004", "9", "01/08/2003", "01/09/2003", "N", "55.55", "121000358", "Bank of America, National Association", "648500112001"]
];
var headlist = ["", "PAD ID", "Payee ID", "Start Date", "Next Scheduled", "Frequency", "Amount", "Transit Routing", "Bank Name", "Bank Account"];
var obj1 = new Active.Controls.Grid;
obj1.setId("grid1");
obj1.setRowCount(4);
obj1.setColumnCount(10);
obj1.setDataText(function(i, j){return datalist[i][j]});
obj1.setColumnText(function(i){return headlist[i]});
// set headers width/height
obj1.setRowHeaderWidth("0px");
obj1.setColumnHeaderHeight("20px");
document.write(obj1);
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
I have been slightly successful in getting the grid to display within the tables above by doing an obj1.refresh() after the entire page has loaded. The headers show fine but the data portion of the grid is moved to the right about halfway across the width of the table.
The scroll bars will scroll the data but it just seems like there is a huge cell at the beginning of my data rows that does not scroll and is blocking the data from view. The scroll then stops at the end of the headers so I can't even get all of the data to show.