How to make two grids scroll in sync

[aitc-plmsupport]

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?

Thanks,

[PEHOWE]

@aitc-plmsupport,

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.

[Janaki.Raman]

Hi @PEHOWE 

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.

Thanks,

Janakiraman P

[OldGoat]

AITC,

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:

https://stackoverflow.com/questions/9236314/how-do-i-synchronize-the-scroll-position-of-two-divs

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!!

[PEHOWE]

@aitc-plmsupport 

@OldGoat 

There is an article which as information on using JQuery :  Article - CS342798
 

How to use jQuery Plugin or external JavaScript plugins in ThingWorx and in Mashups

[PEHOWE]

@aitc-plmsupport,

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

Regards,

Pehowe

[PEHOWE · Accepted solution]

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.