problem when show a hide grid

when show a hide grid ,and click an the cell, all rows in the grid will be lost,but if you click on the column header, the lost rows will come back. can anyone help me? thanks. here is the code.
<html><head><meta http-equiv="Content-Type" content="text/html;">
<title>ActiveWidgets Examples</title>
<script type="text/javascript" src="js/aw.js"></script>
<link rel="stylesheet" type="text/css" href="css/ajaxtags.css" />
<link rel="stylesheet" type="text/css" href="css/displaytag.css" />
<link rel="stylesheet" type="text/css" href="css/aw.css"/>
</head>
<body>
<input type="button" onclick="showGrid();">
<script language="JavaScript">
var myData = [
["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
["ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"],
["SAP", "SAP AG (ADR)", "40,986.328", "8,296.420", "28961"],
["CA", "Computer Associates Inter", "15,606.335", "3,164.000", "16000"]];

var myRow = ["MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"]
var myHeaders = ["Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"];
var grid = new AW.Grid.Extended;
grid.setId("myGrid");
grid.setCellText(myData);
grid.setHeaderText(myHeaders);
grid.setColumnCount(5);
grid.setRowCount(4);
grid.setSelectorVisible(true);
grid.setSelectorText(function(i){return this.getRowPosition(i)+1});
grid.setStyle("display", "none") ;

document.write(grid);
function showGrid(){
grid.setStyle("display","block");
}
</script>
</body>
</html>

The grid does not initialize correctly in the hidden state. Instead of unhiding and hiding try adding and removing the grid to the page -

parentDIV.innerHTML = grid; // add
parentDIV.innerHTML = ""; // remove

instead of

grid.setStyle("display", "block"); // show
grid.setStyle("display", "none"); // hide

Forum search