Column reordering in Angular Gantt component
4 Apr 202313 minutes to read
The column reordering can be done by dragging a column header from one index to another index within the TreeGrid. To enable reordering, set the allowReordering
property to true
.
To reorder the columns, inject the ReorderService
in the provider section of AppModule
.
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { projectNewData } from './data';
@Component({
selector: 'app-root',
template:
`<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns" [splitterSettings] = "splitterSettings" [allowReordering] = 'true'></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data: object[];
public taskSettings: object;
public splitterSettings: object;
public columns: object[];
public ngOnInit(): void {
this.data = projectNewData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
];
this.splitterSettings = {
columnIndex:4
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { ReorderService } from '@syncfusion/ej2-angular-gantt';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, GanttModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ReorderService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
You can disable the reordering of a particular column by setting the
columns.allowReordering
property tofalse
.
Reorder multiple columns
Multiple columns can be reordered at a time by using the reorderColumns
method.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';
import { projectNewData } from './data';
@Component({
selector: 'app-root',
template:
`<button ejs-button id='reordercolumns' (click)='reorderColumns()'>Reorder Multiple Columns</button>
<br><br><br>
<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns" [splitterSettings] = "splitterSettings" [allowReordering] = 'true'></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data: object[];
public taskSettings: object;
public splitterSettings: object;
public columns: object[];
@ViewChild('gantt', {static: true})
public ganttObj: GanttComponent;
public ngOnInit(): void {
this.data = projectNewData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
];
this.splitterSettings = {
columnIndex:4
};
};
reorderColumns(): void {
this.ganttObj.reorderColumns('TaskName' ,'Progress');
};
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttModule } from '@syncfusion/ej2-angular-gantt';
import { ReorderService } from '@syncfusion/ej2-angular-gantt';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, GanttModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ReorderService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Reorder Events
During the reorder action, the gantt component triggers the below three events.
- The
columnDragStart
event triggers when column header element drag (move) starts. - The
columnDrag
event triggers when column header element is dragged (moved) continuously. - The
columnDrop
event triggers when a column header element is dropped on the target column.
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { Gantt } from '@syncfusion/ej2-gantt';
import { GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { projectNewData } from './data';
@Component({
selector: 'app-root',
template:
`<ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns" [splitterSettings] = "splitterSettings" [allowReordering] = 'true'
(columnDragStart)="columnDragStart()" (columnDrag)="columnDrag()" (columnDrop)="columnDrop()"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent{
// Data for Gantt
public data: object[];
public taskSettings: object;
public splitterSettings: object;
public columns: object[];
@ViewChild('gantt', {static: true})
public ganttObj: GanttComponent;
public ngOnInit(): void {
this.data = projectNewData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
};
this.columns = [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
{ field: 'TaskName', headerText: 'Task Name', width: '150' },
{ field: 'StartDate', headerText: 'Start Date', width: '150' },
{ field: 'Duration', headerText: 'Duration', width: '150' },
{ field: 'Progress', headerText: 'Progress', width: '150' },
];
this.splitterSettings = {
columnIndex:4
};
};
columnDrop() {
alert('columnDrop event is Triggered');
}
columnDragStart() {
alert('columnDragStart event is Triggered');
}
columnDrag() {
alert('columnDrag event is Triggered');
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GanttModule, ReorderService } from '@syncfusion/ej2-angular-gantt';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule, GanttModule
],
declarations: [AppComponent],
bootstrap: [AppComponent],
providers: [ReorderService]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);