Problems embedding grid within a table

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

<link rel="stylesheet" type="text/css" media="all" href="activeui/runtime/classic/activeui.css" />
<script language="JavaScript" src="activeui/runtime/activeui.js">_</script>

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

Chadd Whistler

February 23,

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.

Chadd Whistler

February 23,

Yes, I found the bug in the grid stylesheets - you need to add

.active-scroll-data {left:0px; top: 0px}

to your style block. However I also see that column resizing doesn't work well when the grid is inside your table layout. I am still looking into this.

Alex (ActiveWidgets)

February 23,

Hey that's great and it worked!

I am able to resize my columns without a problem though.

Thanks for the quick response!!

Chadd Whistler

February 23,

This topic is archived.

Problems embedding grid within a table

See also:

Search

New Data Grid

Version 2