Showing results for 
Search instead for 
Did you mean: 
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Learn all about the Community Ranking System, a fun gamification element of the PTC Community. X

How to make two grids scroll in sync


How to make two grids scroll in sync

Hi Team,


I have two datasets displayed in two different grids, I need to make one scroll bar that works for both of them.



any suggestions?








Why do you have them in 2 Grids? 
Build a service which accepts the 2 infotables and output a single infotable which can then be displayed and will scroll together.


Just a suggestions.





I have the same question too.


I have two advanced tree grid displaying one data from PLM and another from SAP.


In my case it cannot be merged into one infotabe/grid ,  I should display them individually still want them to be synchronized when user scrolls the grid rows.




How can I achieve the same.





Janakiraman P



I really don't know if it will help or not.  Sounds like it would be a really cool feature if you can get it working...doesn't matter WHY you want/need it...

I did some searching around on my go-to javascript answer site and found this:


The accepted solution is to use jQuery and makes use of the scrollTop() function.  Will it work in TWX?  I don't know, but maybe it will give you a start down the right path.  If you hit on a solution, please share!  Thanks!!


One approach is to do something like:

In this case I have 2 visible InfoTables and a service behind the button which takes the inputs and outputs a merged table.


Because you said that is not your goal I took another look:

In this case selecting the left grid, updates the slider and the selected row on the right grid. 
I also had the slider change which is updating the selected the rows in both grids.

I have not loaded enough rows to determine the behavior when the grid adds scroll bars.
Let me know if this is what you are trying to accomplish




Hello @aitc-plmsupport ,


I always like a working example better then a description.
There are 2 different mashups in this example:

  • Case-Community-dualGrid-V3-Mashup
    • Shows 2 grids with a button which creates a merged grid
  • Case-Community-DualGrid-V5-mashup
    • Has 2 grids and a slider which any one of the 3 widgets can be updated and the change will be reflected in the others.

This is an example. I am sure you could modify the example to remove the slider if that is your goal.


If this address your questions please identify as an acceptable solution.

Top Tags