Scroll function causes duplicate table bug

I am experiencing a bug with the grid. When the table loads it appears ok. Then when I select sort on one of the columns I get a duplicated table below the current one. The second table is locked.

I get the same bug in IE8 and FF 3.6.2. In IE8 the bug also appears to cause the initial table to show up low on the page and then the duplicate shows above it.

Let me know if anyone else is seeing this issue and if they are aware of a fix.

Most likely this happens because you added the grid twice, i.e. using both grid.refresh() and document.write(grid) at the same time.

I dont think I am adding the grid twice. When the page loads it shows up with one grid. Its only when I click on sort that it doubles up.

Here is my code,

var obj = new AW.Grid.Extended;
obj.setId("myGrid");
obj.setHeaderText(myHeaders);
obj.setCellData(myCells);
obj.setVirtualMode(true);
obj.setColumnCount(16);
obj.setRowCount(2225);
obj.setFixedLeft(2);
obj.setSelectionMode("multi-row-marker");
for( var i = 0; i < myCells.length; i++ ){
var link = new AW.UI.Link;
link.setControlText( myCells[ i ][ 15 ] );

link.setControlLink( 'javascript:clicker( \'' + myCells[ i ][ 15 ].toLowerCase() + '.jpg' + '\')' );
obj.setCellTemplate( link, 15, i);
}
for( var i = 0; i < myCells.length; i++ ){
var link = new AW.UI.Link;
link.setControlText( myCells[ i ][ 1 ] );
link.setControlLink( 'javascript:showViewerDiv( \'' + myCells[ i ][ 1 ].toLowerCase() + '\')' );
obj.setCellTemplate( link, 1, i);
}
obj.onSelectedRowsChanged = function(arrayOfRowIndices){ window.status = arrayOfRowIndices; }
document.getElementById( 'myGrid' ).innerHTML = "";
document.write(obj);

http://www.activewidgets.com/javascript.forum.25864.2/help-i-seem-to-be.html

obj.setSelectionMode("multi-row-marker");

obj.setCellLink("javascript:void(0);", 1);
obj.setCellLink("javascript:void(16);", 15);

obj.setCellTemplate(new AW.Templates.Link, 1);    // and template
obj.setCellTemplate(new AW.Templates.Link, 15);    // and template

obj.onCellClicked = function(event, col, row){
if (col==1 ){ showViewerDiv( this.getCellText(15, row).toLowerCase() )}
if (col==15 ){ clicker( this.getCellText(15, row).toLowerCase() + '.jpg' )}
};

document.write(obj);

if (col==1 ){ showViewerDiv( this.getCellText(1, row).toLowerCase() )}

Thanks for tips on the code. That really simplifies things.

Looks like the issue was the document.write(obj); call. I removed it and changed to obj.refresh(); and the issue went away.

Thanks
Marc

>> document.getElementById( 'myGrid' ).innerHTML = "";

looks like you had another element with the same id as the grid - that was the reason for the second grid after refresh.