Preventing Column Reordering Across Defined Groups in FlexGrid

Preventing Column Reordering Across Defined Groups in FlexGrid

Posted by: uriel.t on 24 June 2025, 6:21 am EST

• 

  uriel.t

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 24 June 2025, 6:21 am EST

  Hello Wijmo team,

  I’m using FlexGrid in an Angular application and need to restrict column reordering to defined column groups.

  Specifically, I want to allow users to drag and reorder columns within a group, but prevent them from dragging a column across group boundaries. For example:

  Columns 0–2 are Group A: reorderable only within themselves

  Columns 3–5 are Group B: reorderable within themselves

  Columns 6+ should be locked entirely

  I tried setting allowDragging = false on the “locked” columns, but it also prevents reordering past those columns — i.e., you can’t drag a column from left of a locked column to the right of it.

  I would like to:

  Define multiple reorderable groups.

  Prevent dragging columns between these groups.

  Allow visual feedback (e.g., not-allowed cursor) when hovering over an invalid drop zone.

  Is there a built-in way to do this in Wijmo FlexGrid? Or do you recommend a specific pattern or event combination for this use case?

  Thank you!

• 

  vivek.pannu

  

  • Post Options:
  • Link
    Copy

  Posted 25 June 2025, 3:01 am EST

  Hi Uriel,
  
  You can restrict the column dragging within the column groups. You’ll have to handle the ‘draggingColumnOver’ event of the FlexGrid and cancel this event for the columns where dropping is not allowed. A stop cursor sign will automatically appear for those columns where this event is cancelled.
  
  Please refer to the following sample for a better understanding - https://stackblitz.com/edit/angular-ivy-ugwwveqt?file=src%2Fapp%2Fapp.component.ts
  
  Please note that, in the above sample, we have set the ‘allowDragging’ property to false on the column groups that should be dragged. You can modify the code and adjust it as per your project requirements. In case, you face any issues, please let us know.
  
  Regards