Grid in cell - searched forums without success

I've tried several of the suggestions for getting a grid to display in a table cell without success.

Any ideas why the page below doesn't work?

<html>
<head>
<title>Grid in table</title>
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>


<link href="themes/default/styles/grid.css" rel="stylesheet" type="text/css" ></link>
<script src="scripts/grid.js"></script>


<style>
.active-controls-grid {height: 100%; font: menu;}

.active-column-0 {width: 80px;}
.active-column-1 {width: 100px;}
.active-column-2 {width: 200px;}
.active-column-3 {width: 80px;}
.active-column-4 {width: 80px;}
.active-column-5 {width: 80px;}
.active-column-6 {width: 40px;}
.active-column-7 {width: 40px;}
.active-column-8 {width: 40px;}
.active-column-9 {width: 40px;}

.active-grid-column {border-right: 1px solid threedlightshadow;}
.active-grid-row {border-bottom: 1px solid threedlightshadow;}

</style>


<script>
var myData = [
["1284930-12","ssddsd", "foo", "Alert", "2004Dec07", "Unknown", "x", "x", "x", "x"],
["1284930-12","vffcds", "foo", "Alert", "2004Dec07", "Unknown", "x", "x", "x", "x"]

];

var myColumns = [
"Account", "ID", "Class", "Status", "Date", "Type", "SSN","Add.", "Home","Work"
];
</script>
<script>
</head>

<TABLE STYLE="table-layout:fixed" WIDTH="600">
<tr>
<td>
<div id="grid">
<script>

// create ActiveWidgets Grid javascript object
var obj = new Active.Controls.Grid;

// set number of rows/columns
obj.setRowProperty("count", 2);
obj.setColumnProperty("count", 10);

// provide cells and headers text
obj.setDataProperty("text", function(i, j){return myData[i][j]});
obj.setColumnProperty("text", function(i){return myColumns[i]});

// set headers width/height
obj.setRowHeaderWidth("28px");
obj.setColumnHeaderHeight("20px");

// set click action handler
obj.setAction("click", function(src){window.status = src.getItemProperty("text")});

obj.setRowHeaderWidth("0px");

// write grid html to the page
document.write(obj);

</script>
</div>
</td>
</tr>
</table>
</body>
</html>

January 21,

First, take out the extra opening <script> tag before the closing </head> tag, then change the height of "100%" defined in the .active-controls.grid style to something specific like "200px".

Then it works fine. Rather than setting it to 100% to get it to fill the window since that doesn't appear to work, maybe try using javascript to get the window height and set the style to that pixel height after the page has loaded.

HTH - Jeff

Jeff

January 25,

Update... actually what you have will work if you remove the STYLE="table-layout:fixed" from your TABLE tag and add HEIGHT="100%".

Jeff

January 25,

This topic is archived.

Grid in cell - searched forums without success

See also:

Search

New Data Grid

Version 2