3.2.0

Extended Grid with multiple headers not painting

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
Jeff Czaplewski
October 20,
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>
Jeff Czaplewski
October 20,
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?
Eric Orwall
November 11,
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);
Carlos
November 11,

This topic is archived.

See also:


Back to support forum