Here is the code for my html page that goes
in the iframe. The calling code is below. It must be in the iframe. If you click on the refresh button twice, it refreshes the object twice and then everything appears fine.
<html>
<head>
<script src="../../runtime/lib/aw.js"></script>
<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link>
</head>
<body>
<style>
#myGrid { height: 100px; width: 200px;}
#myGrid .aw-grid-row {height: 20px; border-bottom: 1px solid #ccc}
/* Alternate row colors */
#myGrid .aw-alternate-even {background: #fff;}
#myGrid .aw-alternate-odd {background: #eee;}
#myGrid .aw-alternate-even .aw-column-1 {background: #eee;}
#myGrid .aw-alternate-odd .aw-column-1 {background: #ddd;}
/* Selected rows */
#myGrid .aw-rows-selected {background: #316ac5;}
#myGrid .aw-rows-selected .aw-column-1 {background: #316ac5;}
/* Selected cells */
#myGrid .aw-grid-row .aw-cells-selected {background: #316ac5;}
#myGrid .aw-grid-headers {color: blue}
#myGrid .aw-grid-headers .aw-column-1 {font-weight: bold}
/* Highlight on mouseover, mousedown */
#myGrid .aw-mouseover-header {color: red;}
#myGrid .aw-mousedown-header {color: yellow;}
#myGrid .aw-header-1 {background: #def}
#myGrid .aw-row-selector {width: 20px; text-align: center}
#myGrid .aw-row-2 .aw-row-selector {font-weight: bold}
#myGrid .aw-mouseover-row .aw-row-selector {color: red;}
/* Highlight on mouseover, mousedown */
#myGrid .aw-mouseover-selector {background: green;}
#myGrid .aw-mousedown-selector {background: yellow;}
</style>
<script>
var myHeaders = [ "ExamId", "Patient Id", "Patient Name"];
var columnFilters = ['<input name="examID" class="aw-item-text" type="text"></input>',
'<input name="patientId" class="aw-item-text" type="text"></input>',
'<input name="patientName" class="aw-item-text" type="text"></input>'];
var myData = [["6000179","10000007","CZWORKLIST, JEFF"],
["6000180","10000007","CZWORKLIST, JEFF"],
["abc","10000007","CZWORKLIST, JEFF"],
["asd","10000007","CZWORKLIST, JEFF"],
["1234567","10000007","CZWORKLIST, JEFF"],
["arthfda","10000007","CZWORKLIST, JEFF"]
];
</script>
<script>
var obj = new AW.Grid.Extended;
obj.setId("myGrid"); // necessary for CSS rules
obj.setCellText(myData); // 2-dimensional js array
obj.setFixedLeft(0);
obj.setFixedRight(0);
obj.setHeaderText(columnFilters); // js array for the second row of headers
//obj.setHeaderText(myHeaders); // js array (see top of this page)
obj.setHeaderHeight (30);
obj.setSelectionMode("single-row");
obj.setColumnCount(myHeaders.length);
obj.setRowCount(myData.length);
obj.setSelectorVisible(false);
document.write(obj);
</script>
<script>
obj.onCellClicked = function(event, column, row){ window.status = "Cell " + column + "." + row + " clicked"};
obj.onCellDoubleClicked = function(event, column, row){ window.status = "Cell " + column + "." + row + " double clicked"};
obj.onCellMouseOver = function(event, column, row){ window.status = "Cell " + column + "." + row + " mouse over"};
obj.onCellMouseOut = function(event, column, row){ window.status = "Cell " + column + "." + row + " mouse out"};
obj.onCellMouseDown = function(event, column, row){ window.status = "Cell " + column + "." + row + " mouse down"};
obj.onCellMouseUp = function(event, column, row){ window.status = "Cell " + column + "." + row + " mouse up"};
obj.onHeaderClicked = function(event, index){ window.status = "Header " + index + " clicked"};
obj.onHeaderDoubleClicked = function(event, index){ window.status = "Header " + index + " double clicked"};
obj.onHeaderMouseOver = function(event, index){ window.status = "Header " + index + " mouse over"};
obj.onHeaderMouseOut = function(event, index){ window.status = "Header " + index + " mouse out"};
obj.onHeaderMouseDown = function(event, index){ window.status = "Header " + index + " mouse down"};
obj.onHeaderMouseUp = function(event, index){ window.status = "Header " + index + " mouse up"};
obj.onFooterClicked = function(event, index){ window.status = "Footer " + index + " clicked"};
obj.onFooterDoubleClicked = function(event, index){ window.status = "Footer " + index + " double clicked"};
obj.onFooterMouseOver = function(event, index){ window.status = "Footer " + index + " mouse over"};
obj.onFooterMouseOut = function(event, index){ window.status = "Footer " + index + " mouse out"};
obj.onFooterMouseDown = function(event, index){ window.status = "Footer " + index + " mouse down"};
obj.onFooterMouseUp = function(event, index){ window.status = "Footer " + index + " mouse up"};
obj.onSelectorClicked = function(event, index){ window.status = "Selector " + index + " clicked"};
obj.onSelectorDoubleClicked = function(event, index){ window.status = "Selector " + index + " double clicked"};
obj.onSelectorMouseOver = function(event, index){ window.status = "Selector " + index + " mouse over"};
obj.onSelectorMouseOut = function(event, index){ window.status = "Selector " + index + " mouse out"};
obj.onSelectorMouseDown = function(event, index){ window.status = "Selector " + index + " mouse down"};
obj.onSelectorMouseUp = function(event, index){ window.status = "Selector " + index + " mouse up"};
obj.onCurrentColumnChanged = function(index){ window.status = "current column: " + index };
</script>
<p></p>
<script>
var button = new AW.UI.Button;
button.setControlText("Refresh List");
document.write(button);
button.onClick = function(){
obj.setHeaderCount(2);
obj.setHeaderText(myHeaders); // js array (see top of this page)
obj.setHeaderText(columnFilters, 1); // js array for the second row of headers
obj.refresh();
}
</script>
</body>
</html>
**************************************************
**************************************************
and here is the code from the calling page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<iframe width="800" height="250" id="gridFrame"
src="D:\orion\czaplew_view\applications\rumba\webapp\js\ActiveWidgets\examples\quickref\gridtest.htm">
</iframe>
</body>
</html>