Misalignment of 2 grids using scollpositionchanged to sync them

Misalignment of 2 grids using scollpositionchanged to sync them

Posted by: weide.zhu on 4 June 2023, 12:09 pm EST

• 

  weide.zhu

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 4 June 2023, 12:09 pm EST - Updated 4 June 2023, 12:17 pm EST

  hi, we currently use onScrollPositionChanged event to bind two grid for scrolling, like below, it works well.

  onScrollPositionChanged(e: wjcGrid.FlexGrid, arg) {
  
  this.flexDof.scrollPosition = new wjcCore.Point(
  
  e.scrollPosition.x,
  
  e.scrollPosition.y
  
  );
  
  }

  But when scrolling to the rightmost part, we notice the misalignment (see attached screenshot), I believe it is due to the vertical scrollbar in one grid, and is there any way to address this?

  

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 4 June 2023, 5:41 pm EST

  Hello,

  We apologize but we are unable to replicate the issue at our end, could you please refer to the below sample used to replicate the issue and let us know if any changes are required to replicate the issue at our end?

  If you are facing the issue only in your application and not in the below-shared sample, it might be possible that the issue is caused due to some other factors in your application therefore I would request you to please share a small sample replicating the issue.

  Sample link: https://stackblitz.com/edit/angular-uofkx2?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  weide.zhu

  • Post Options:
  • Link
    Copy

  Posted 4 June 2023, 5:49 pm EST

  thanks, please see your updated sample

  https://stackblitz.com/edit/angular-immgys?file=src%2Fapp%2Fapp.component.ts

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 4 June 2023, 6:24 pm EST

  Hello,

  Thank you for sharing the sample, to resolve the issue you can set the main grid’s(scrolling grid) scroll position based on the sub-grid as well so the scroll position becomes exactly same for both grids. Please refer to the updated sample link below demonstrating the same:

  https://stackblitz.com/edit/angular-ek6lah?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  weide.zhu

  • Post Options:
  • Link
    Copy

  Posted 5 June 2023, 10:57 am EST

  thanks for your updates.

  unfortunately this does not work, it has 2 issues:

  1. in our case, the sub grid always has one row, as a result, the vertical scroll on the main grid does not work.

  2. the values are cutoff in the last column.

  please see the updated sample - https://stackblitz.com/edit/angular-j67hae?file=src%2Fapp%2Fapp.component.css

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 5 June 2023, 5:39 pm EST

  Hello,

  1. In that case, you can only set the scrollPosition.x of the main grid as per the sub-grid. Please refer to the updated sample link below for reference.

  2. To workaround this you can add a custom class to all the cells present in the last column and using CSS give them padding from the right(as per the width of the scrollbar). Please refer to the sample link below demonstrating the same.

  Sample link: https://stackblitz.com/edit/angular-q2khkx?file=src%2Fapp%2Fapp.component.ts,src%2Fstyles.css

  Regards

• 

  weide.zhu

  • Post Options:
  • Link
    Copy

  Posted 5 June 2023, 7:13 pm EST

  this works!

  thanks so much for your help!