Ability to connect two table widgets and synchronize the horizontal scrolling

Ability to connect two table widgets and synchronize the horizontal scrolling

Posted by: fernando.passaia on 6 August 2021, 4:14 am EST

• 

  fernando.passaia

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 6 August 2021, 4:14 am EST - Updated 3 October 2022, 12:03 pm EST

  Hello, good morning all, happy Friday. I have a request to connect two tables (Grids) such that the horizontal scrolling can be synchronized (img attached).

  What my client wants is to “compare” information between the Grids without having to scroll both manually. Is It possible somehow?

• 

  weide.zhu

  • Post Options:
  • Link
    Copy

  Posted 7 August 2021, 2:35 am EST

  I recently got an answer from wijmo support

  The FlexGrid has a scrollPositionChanged event that can be captured. In the event handler, set the x position of the other grid by setting the scrollPosition. You may refer to the sample link below for reference:

  https://stackblitz.com/edit/angular-9-0-0-rc-1-cwzryj

• 

  ashwin.saxena

  

  • Post Options:
  • Link
    Copy

  Posted 8 August 2021, 11:28 pm EST

  Hi Fernando,

  The solution provided by weide.zhu is correct and you and use it in your application.

  @weide.zhu, thank you for the help.

  Regards,
  
  Ashwin

• 

  fernando.passaia

  • Post Options:
  • Link
    Copy

  Posted 9 August 2021, 3:59 pm EST

  Hey weide.zhu and Ashwin, thank you guys, I’ll Give It a try. Have a great week!

• 

  peter_murray

  • Post Options:
  • Link
    Copy

  Posted 12 April 2022, 4:02 pm EST

  Hello,

  I’m running into the same problem. I’d like to scroll two tables horizontally, simultaneously, however, one of my tables must have one extra column; this is a requirement. It’s always the first column in the table, and it’s position cannot be changed nor can the column be resized. I would like for the columns of both tables to line up, but the challenge has been getting the table with the extra column to only start scrolling when that first extra column has been scrolled past. It’s also been difficult to fix the other behavior, when you start scrolling the other table without the extra column and the headers become misaligned because the extra-column-table still has to scroll past the extra column.

  If there is any advice anyone has on how this might best be fixed, I’d appreciate it if you could share it here.

  -Peter

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 13 April 2022, 4:45 am EST

  Hello,

  As per your requirement, the only possible scenario we can think of would be to only make one grid scroll bar visible and adjust the scroll bars position in a manner so that it will sync with the other(with no extra column) grid. Please refer to the sample link below demonstrating the same:

  https://stackblitz.com/edit/angular-9-0-0-rc-1-agjadj?file=src%2Fapp%2Fapp.component.ts

  You can try the shared approach if it works for you.

  Regards