Skip to main content
A
aitc-plmsupport9-Granite
9-Granite
January 27, 2023
Solved

How to make two grids scroll in sync

  • January 27, 2023
  • 5 replies
  • 4150 views

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,

 

Best answer by PEHOWE

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.

5 replies

P
PEHOWE17-Peridot
17-Peridot
January 30, 2023

@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.

J
Janaki.Raman11-Garnet
11-Garnet
February 6, 2023

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

O
OldGoat13-Aquamarine
13-Aquamarine
February 8, 2023

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

    P
    PEHOWE17-Peridot
    17-Peridot
    February 14, 2023

    @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

     

     

    P
    PEHOWE17-Peridot
    17-Peridot
    February 17, 2023

    @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

      P
      PEHOWE17-PeridotAnswer
      17-Peridot
      March 1, 2023

      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.

      Terms & ConditionsCookie settingsAccessibility statement