HelpBot Assistant

How can I help you?

Column Reorder in Angular Grid component

19 Mar 202624 minutes to read

The Syncfusion® Angular Grid component allows reordering columns by drag and drop of a particular column header from one position to another position within the grid. This feature can be enabled by injecting the ReorderService to the providers array.

To enable column reordering in the Grid, set the allowReordering property to true in the grid.

Once enabled, columns can be reordered by:

  • Selecting a column header.
  • Dragging it to the desired position.
  • Dropping it at the new position to update the order.

The following example demonstrates column reordering in the Grid component:

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, ReorderService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [GridModule ],
    providers: [ReorderService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowReordering]='true' height='315px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=80></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

  • The appearance of the column headers during drag and drop can be customized using the columnDrag and columnDrop events.
  • When columns are reordered, the position of the corresponding column data will also be changed. Ensure that any additional code or logic that relies on the order of the column data is updated accordingly.

Prevent reordering for particular column

By default, all columns in the Syncfusion® Angular Grid can be reordered when the grid-level allowReordering property is set to true. However, there may be specific columns that should remain in a fixed position and not be reordered. To prevent reordering for a particular column, set the allowReordering property of that column to false in the column definition.

In the following example, the “ShipCity” column is prevented from being reordered by setting its allowReordering property to false:

import { data } from './datasource';
import { Component, OnInit } from '@angular/core';
import { GridModule, ReorderService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [GridModule ],
    providers: [ReorderService],
    standalone: true,
    selector: 'app-root',
    template: `<ejs-grid [dataSource]='data' [allowReordering]='true' height='315px'>
                <e-columns>
                    <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                    <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                    <e-column field='ShipCity' headerText='Ship City' width=100 [allowReordering]='false' ></e-column>
                    <e-column field='ShipName' headerText='Ship Name' width=80></e-column>
                </e-columns>
                </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];

    ngOnInit(): void {
        this.data = data;
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Reorder columns externally

The Syncfusion® Grid Angular allows reordering of columns externally, which means that using methods, columns can be programmatically moved around within the grid, based on their index or target index, or by using their field name.

When reordering columns externally, the allowReordering property of the grid must be set to true.

Reorder columns by index

The reorderColumnByIndex method reorders columns by moving them from their current index to a new index. This is useful when the exact positions of the columns are known, as it allows direct control over the column order without using drag-and-drop.

Method signature:

reorderColumnByIndex(fromIndex: number, toIndex: number): void
  • fromIndex: The current index of the column to move.
  • toIndex: The new index where the column should be moved.

In this example, the “Customer ID” column, located at index “1”, is moved to index “3” when clicking the “Reorder Column by Index” button.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GridComponent, GridModule, ReorderService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule, ButtonModule ],
    providers: [ReorderService],
    standalone: true,
    selector: 'app-root',
    template: `<button ejs-button id='reorderByIndex' cssClass="e-info"(click)='reorderByIndex()'>Reorder column by index</button>
    <ejs-grid #grid [dataSource]='data' [allowReordering]='true' height='280px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipRegion' headerText='Ship Region' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('grid') public gridObj?: GridComponent;

    ngOnInit(): void {
        this.data = data;
    }
    reorderByIndex(): void {
        (this.gridObj as GridComponent).reorderColumnByIndex(1, 3); // move column from index 1 to index 3
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Reorder columns by target index

The reorderColumnByTargetIndex method enables reordering of one or more columns to a specific target index. This method is particularly useful when moving columns based on their field names rather than their current index positions.

Method signature:

reorderColumnByTargetIndex(fieldName: string | string[], toIndex: number): void

Parameters:

  • fieldName: The field name (or array of field names) of the column(s) to be reordered.
  • toIndex: The target index where the column(s) should be moved.

The following example demonstrates the use of the reorderColumnByTargetIndex method to reorder both single and multiple columns:

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GridComponent, GridModule, ReorderService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [ GridModule, ButtonModule ],
    providers: [ReorderService],
    standalone: true,
    selector: 'app-root',
    template: `<button ejs-button id='reordersingle' cssClass="e-info" (click)='reorderSingleColumnByTargetIndex()'>Reorder single column</button>
     <button ejs-button id='reordermultiple' cssClass="e-info" (click)='reorderMultipleColumnByTargetIndex()'>Reorder Multiple columns</button>
    <ejs-grid #grid [dataSource]='data' [allowReordering]='true' height='280px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipRegion' headerText='Ship Region' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('grid') public gridObj?: GridComponent;

    ngOnInit(): void {
        this.data = data;
    }
    reorderSingleColumnByTargetIndex(): void {
        (this.gridObj as GridComponent).reorderColumnByTargetIndex("OrderID", 3); // move column with field name "OrderID" to index 3
    }
    reorderMultipleColumnByTargetIndex(): void {
        (this.gridObj as GridComponent).reorderColumnByTargetIndex(['OrderID', 'CustomerID'], 3); // move columns with field name "OrderID" and "CustomerID" to index 3
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Reorder columns by field names

The reorderColumns method provides a way to reorder columns using their field names instead of index positions. This method is particularly useful when the exact column positions are unknown, but the field names are available. By specifying the source column field name and the target column field name, the grid updates the order automatically.

Method signature:

reorderColumns(fromFName: string | string[], toFName: string): void

Parameters:

  • fromFName: The field name (or array of field names) of the column(s) to be moved.
  • toFName: The field name of the target column before which the source column(s) should be placed.

The following example demonstrates the use of the reorderColumns method to reorder both single and multiple columns based on field names by clicking the respective buttons.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { GridComponent, GridModule, ReorderService } from '@syncfusion/ej2-angular-grids';

@Component({
    imports: [GridModule,ButtonModule],
    providers: [ReorderService],
    standalone: true,
    selector: 'app-root',
    template: `<button ejs-button id='reordersingle' cssClass="e-info" (click)='reorderSingleColumnUsingFieldName()'>Reorder single Column</button>
     <button ejs-button id='reordermultiple' cssClass="e-info" (click)='reorderMultipleColumnsUsingFieldName()'>Reorder Multiple Columns</button>
    <ejs-grid #grid [dataSource]='data' [allowReordering]='true' height='280px'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
            <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
            <e-column field='ShipRegion' headerText='Ship Region' width=100></e-column>
            <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

    public data?: object[];
    @ViewChild('grid') public gridObj?: GridComponent;

    ngOnInit(): void {
        this.data = data;
    }
    reorderSingleColumnUsingFieldName(): void {
        (this.gridObj as GridComponent).reorderColumns("ShipCity", "OrderID");
    }
    reorderMultipleColumnsUsingFieldName(): void {
        (this.gridObj as GridComponent).reorderColumns(['ShipCity', 'ShipRegion', 'ShipName'], 'OrderID');
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Reorder columns using column model

The reorderColumnByModel method provides an advanced way to reorder columns by working with complete column model objects. This method is specifically designed to handle complex column structures, particularly stacked header columns, but it also works seamlessly with normal column configurations. While methods like reorderColumnByIndex, reorderColumns, and reorderColumnByTargetIndex are suitable for simple, flat column structures, reorderColumnByModel is the preferred approach when working with hierarchical column arrangements.

Method signature:

reorderColumnByModel(fromColumn: Column, toColumn: Column): void

Parameters:

  • fromColumn: The column object to move.
  • toColumn: The target column object before which the fromColumn should be placed.

When to use this method:

  • Moving entire column groups.
  • Handling complex column hierarchies.
  • Working directly with column objects rather than field names or indices.

In this example:

  • “Order Details” stacked header is moved before “Customer ID”.
  • “Ship Country” is moved before “Ship Name” within the “Ship Details” stacked header.

This shows the method handling reordering of both normal and stacked header columns.

import { data } from './datasource';
import { Component, OnInit, ViewChild } from '@angular/core';
import { ButtonModule } from '@syncfusion/ej2-angular-buttons';
import { Column, ColumnModel, GridComponent, GridModule, ReorderService } from '@syncfusion/ej2-angular-grids';

@Component({
  imports: [ GridModule, ButtonModule ],
  providers: [ReorderService],
  standalone: true,
    selector: 'app-root',
    template: `<button ejs-button id='reorderColumn' cssClass="e-info" (click)='reorderColumnUsingColumnModel()'>Reorder Column</button>
     <button ejs-button id='reorderChildColumn' cssClass="e-info" (click)='reorderChildColumnUsingColumnModel()'>Reorder Stacked ChildColumn</button>
    <ejs-grid #grid [dataSource]='data' [allowReordering]='true' height='268px'>
        <e-columns>
        <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="100"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
        <e-column field="Freight" headerText="Freight" format="C2" width="120" textAlign="Right"></e-column>
        <e-column headerText="Order Details" textAlign="Center" [columns]="orderColumns"></e-column>
        <e-column headerText="Ship Details" textAlign="Center" [columns]="shipColumns"></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

  public data?: object[];
  @ViewChild('grid') public gridObj?: GridComponent;
    
  public orderColumns: ColumnModel[] = [];
  public shipColumns: ColumnModel[] = [];

  ngOnInit(): void {
  this.data = data;
  this.orderColumns = [
    { field: 'OrderDate', headerText: 'Order Date', format: 'yMd', width: 150 },
    { field: 'EmployeeID', headerText: 'Employee ID', width: 150, textAlign: 'Right' }
  ];
  this.shipColumns = [
    { field: 'ShipName', headerText: 'Ship Name', width: 150 },
    { field: 'ShipCountry', headerText: 'Ship Country', width: 150 }
  ];
  }
  
  // Reorder a stacked header column before a normal column.  
  reorderColumnUsingColumnModel(): void {
    (this.gridObj as GridComponent).reorderColumnByModel(this.gridObj?.columns[3] as Column, this.gridObj?.columns[1] as Column);
  }

  // Reorder a child column within a stacked header column.
  reorderChildColumnUsingColumnModel(): void {
    const shipDetails = this.gridObj?.columns[4] as Column; 
    (this.gridObj as GridComponent).reorderColumnByModel(shipDetails.columns?.[1] as Column, shipDetails.columns?.[0] as Column);
      
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Column Reorder events

The Syncfusion® Angular Grid component provides events that are triggered during different stages of the column reordering process. These events make it possible to run custom actions or show the current status while columns are being reordered through drag-and-drop.

The Grid component supports the following column reorder events:

Event Description
columnDragStart Triggers when column header element drag starts.
columnDrag Triggers continuously while a column header is being dragged.
columnDrop Triggered when a column header is dropped into its new position.

In the following example, the columnDragStart, columnDrag, and columnDrop events are implemented in the Syncfusion® Grid component:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GridModule, ReorderService } from '@syncfusion/ej2-angular-grids'
import { Component, OnInit, ViewChild } from '@angular/core';
import { data } from './datasource';
import { GridComponent, ColumnDragEventArgs, Column } from '@syncfusion/ej2-angular-grids';

@Component({
imports: [GridModule],
providers: [ReorderService],
standalone: true,
  selector: 'app-root',
  template: `<p id='message'>{{ message }}</p><ejs-grid #grid [dataSource]='data' [allowReordering]='true' height='280px' [enableHover]='false'
         (columnDragStart)="columnDragStart($event)" (columnDrag)="columnDrag($event)" (columnDrop)="columnDrop($event)">
              <e-columns>
                  <e-column field='OrderID' headerText='Order ID' textAlign='Right' width=100></e-column>
                  <e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
                  <e-column field='ShipCity' headerText='Ship City' width=100></e-column>
                  <e-column field='ShipRegion' headerText='Ship Region' width=100></e-column>
                  <e-column field='ShipName' headerText='Ship Name' width=120></e-column>
        </e-columns>
    </ejs-grid>`
})
export class AppComponent implements OnInit {

  public data?: object[];
  public message?: string;
  @ViewChild('grid') public gridObj?: GridComponent;

  ngOnInit(): void {
    this.data = data;
    this.message = '';
  }
  columnDrop({ column }: ColumnDragEventArgs) {
    this.message = `columnDrop event triggered`;
    if ((column as Column).allowReordering == true) {
      (this.gridObj as GridComponent).getColumnByField((column as Column).field).customAttributes = {
        class: 'customcss',
      };
    }
  }
  columnDragStart({ column }: ColumnDragEventArgs) {
    this.message = `columnDragStart event triggered`;
    if ((column as Column).field == 'OrderID') {
      (this.gridObj as GridComponent).getColumnByField((column as Column).field).allowReordering = false;
    }
  }
  columnDrag({ column, target }: ColumnDragEventArgs) {
    var index = (target as Element).getAttribute('data-colIndex');
    if (index) {
      this.message = `columnDrag event is triggered. ` + (column as Column).headerText + ` column is dragged to index ` + index;
    }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Syncfusion Angular Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    
<meta name="author" content="Syncfusion" />
    
    <style>
        #loader {
            color: #008cff;
            font-family: 'Helvetica Neue', 'calibiri';
            font-size: 16px;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #message {
            text-align: center;
            color:rgb(255, 0, 0);
        }
        .e-grid .e-headercell.customcss , .e-grid .e-rowcell.customcss {
            background-color: rgb(43, 195, 226);
        }
    </style>
</head>
<body style="margin-top: 125px">
    <app-root>
        <div id='loader'>Loading....</div>
    </app-root>
</body>
</html>