Syncing the column positions of two grids

Syncing the column positions of two grids

Posted by: abhijeet.dey on 8 April 2025, 9:54 am EST

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 8 April 2025, 9:54 am EST

  Hi team,

  I have two flexgrids, one below the another. Both grids have same columns. User can drag the column of first grid, to reposition them, but they can’t do the same on the second grid’s columns. My requirement is to automatically reorder the second grid’s columns, when the user drags and reorders the columns in first grid, so that the column positions are always in sync for both grids. How do I achieve this?

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 9 April 2025, 7:48 am EST

  Hi Abhijeet,

  You can handle the ‘collectionChanged’ event of the flexgrid.columns collection of the first grid to adjust the columns order in the second grid. Please refer to the following sample for the same - https://stackblitz.com/edit/angular-ivy-qhqwx61a?file=src%2Fapp%2Fapp.component.ts

  Please note that, we have used the column.binding property to uniquely identify the columns, please make sure all the columns have a unique binding, else you’ll have to set the ‘name’ property of each column and use that while re-ordering the columns.

  Regards

• 

  abhijeet.dey

  • Post Options:
  • Link
    Copy

  Posted 9 April 2025, 8:40 am EST

  Thanks vivek, I will use this