Prevent Reordering of Non-Locked Columns into Locked Section in Grid

Updated on Feb 24, 2026

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

I want to prevent non-locked columns from moving into the locked columns section when I reorder columns in the Kendo UI for Angular Grid. How can I restrict column reordering between locked and non-locked sections?

This Knowledge Base article also answers the following questions:

• How can I stop non-locked columns from moving into the locked section?
• Is it possible to prevent columns from moving between locked and non-locked areas?
• Can I handle the column reorder event to restrict specific column movements?

Solution

To prevent non-locked columns from being reordered into the locked section, handle both the columnReorder and columnLockedChange events.

When a column reorder operation attempts to cross the locked/unlocked boundary, the Grid fires the columnLockedChange event. You can handle this event to revert the previous column state and prevent the reorder process using the Grid's built-in state management feature.

1. Add a flag to track when a reorder operation is in progress:

   typescript

   private isReordering: boolean = false;

2. Handle the columnReorder event to save the current column state and set the reordering flag:

   typescript

   public onReorder(grid: GridComponent): void {
     this.savedColumnsState = grid.currentState.columnsState;
     this.isReordering = true;
   }

   The currentState.columnsState property captures the complete column configuration before the Grid processes the reorder.

3. Handle the columnLockedChange event to detect and revert locked state changes that occur during reordering. You can use the loadState method to restore the saved column state when isReordering is true:

   typescript

   public onLockedChange(grid: GridComponent): void {
     if (this.isReordering) {
       this.isReordering = false;
       setTimeout(() => {
         grid.loadState({ columnsState: this.savedColumnsState });
       });
     }
   }

The following example demonstrates the suggested approach in action. Try dragging columns across the locked boundary to see the restrictions in effect.

Change Theme

Theme

Loading ...

See Also

• Managing the Angular Data Grid State
• API Reference of the GridComponent
• API Reference of the ColumnReorderEvent
• API Reference of the ColumnLockedChangeEvent