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

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?

 

 

Thanks,

 

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

View in thread

6 replies

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.

Translate
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

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

Translate
    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

     

     

    Translate
    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

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

      Translate
      Terms & ConditionsAccessibility statement