I'm trying to use the AW.Grid.Extended object for it's multiple header row options.
I currently have a worklist where i have a header row (column names) and then a second header row with edit boxes in it so that each column can be filtered.
This worklist is inside an iframe and the iframe appears to be causing a problem. When the worklist paints, it doesn't paint all the columns and the scroll bars are missing. When i refresh the object twice, things get painted correctly.
If i only use one header row, the iframe doesn't have a problem with things.
When the worklist is placed in a regular html page without any iframes, things are fine.
Does anyone have any suggestions or has anyone seen this? I can paste the sample code if need be.
Thanks,
Jeff
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>
I have a problem rendering some rows when i put the grid inside of a iframe.I need to click on any of the empty rows to make the grid shows them. Can you help me?
Jeff, you are doing something "strange" (the number of header-rows and also it's containt are only defined into the button onClick function).
Just put it outside (right before --'document.write(obj);'-- and everything's going fine.
obj.setHeaderCount(2);
obj.setHeaderText(myHeaders, 0);
obj.setHeaderText(columnFilters, 1);