synchronize scrolling between two grids

Please let me know if there's a simple way to synchronize the vertical scrolling between two grids which are displayed side-by-side.
I've tried using the onScrollTopChanged event as follows:

grid1.onScrollTopChanged = function(value){grid2.setScrollTop(value)};

And get either one of two problems:
(1) After about the first 10%, all that from Grid1 is absent from the grid.
(2) Get a stack overflow error.

Is there's a simple way to do this? Thanks in advance for any suggestions.

This code looks correct to me and I don't see any problems when I run it. However if you add the similar event handler to the second grid - you will get an infinite loop as setScrollTop() method will also trigger onScrollTopChanged event. To break the loop you could use some kind of external 'flag' variable which is set before calling setScrollTop and cleared after.

I think I've figured out problem 2 (stack overflow). This likely caused by using the onScrollTopChanged event on both grids to update the other when one is scrolled, which seems to trigger the setScrollTopChanged event between the grids and causes a loop.

But still don't understand cause of problem 1, loss of data in grid1 while scrolling.

Any suggestions how to link the scrolling between the grids?

Thanks for the prompt reply Alex.

I was able to resolve problem 1 (loss of data from grid 1) by setting the virtual mode in both grids to false:

grid1.setVirtualMode(false);

Response time seems fine but grids can hold a few hundred rows, so not sure this good long term solution. Happy for now, though!

Another solution could be the use of mouseover each grid to enable/disable the oposite grid scroll event "mirror reference" that causes an undesired infinite-loop (and then, no need to switch-off the virtualmode)
Check this sample:

<html> 

<head> 

<script src="../../runtime/lib/aw.js"></script> 

<link href="../../runtime/styles/xp/aw.css" rel="stylesheet"></link> 

</head> 

<body> 

<script>   

var grid1 = new AW.UI.Grid;   

grid1.setId('Mygrid1');   

grid1.setCellText(function(i, j){return j + "-" + i}); 

  

grid1.setHeaderText(function(i){return i}); 

grid1.setRowCount(100);   

grid1.setColumnCount(8);   

grid1.setControlSize(500, 200);



var grid2 = new AW.UI.Grid;   

grid2.setId('Mygrid2');   

grid2.setCellText(function(i, j){return j + "-" + i}); 

  

grid2.setHeaderText(function(i){return i}); 

grid2.setRowCount(100);   

grid2.setColumnCount(8);   

grid2.setControlSize(500, 200);



grid1.getScrollTemplate().setEvent('onmouseover', domo1);

function domo1(){

grid1.onScrollTopChanged = function(value){grid2.setScrollTop(value)};

grid2.onScrollTopChanged = function(value){return false}

}



grid2.getScrollTemplate().setEvent('onmouseover', domo2);

function domo2(){

grid2.onScrollTopChanged = function(value){grid1.setScrollTop(value)};

grid1.onScrollTopChanged = function(value){return false}

}



 document.write(grid1);  

 document.write(grid2);

</script>  

</body> 

</html>

Forum search