Undo Redo in Angular Gantt component

27 Apr 202424 minutes to read

The Undo feature enables users to revert the most recent action performed in the Gantt Chart. It helps undo changes made to tasks, dependencies, or other actions within the Gantt Chart.

The Redo feature can reapply an action that was previously undone using the Undo feature. This allows users to revert their decision to undo an action.

The undo redo feature can be enabled in Gantt by using the enableUndoRedo property.

To use undo redo feature, inject the UndoRedoService in the provider section of AppModule.

Configure the feature set for undo redo actions

By default, all the gantt features listed in the below table will be restored for undo and redo actions. However, you have the option to specify only the required actions to be restored using undoRedoActions property.

Built-in Undo Redo Items	Actions
Edit	Undo redo actions can be performed for edited record.
Delete	Undo redo actions can be performed for deleted record.
Add	Undo redo actions can be performed for newly added record.
ColumnReorder	Undo redo actions can be performed for reordered column.
Indent	Undo redo actions can be performed for indented record.
Outdent	Undo redo actions can be performed for outdented record.
ColumnResize	Undo redo actions can be performed for resized column.
Sorting	Undo redo actions can be performed for sorted column.
Filtering	Undo redo actions can be performed for filtered record.
Search	Undo redo actions can be performed for searched value.
ZoomIn	Undo redo actions can be performed for zoomIn action.
ZoomOut	Undo redo actions can be performed for zoomOut action.
ZoomToFit	Undo redo actions can be performed for zoomToFit action.
ColumnState	Undo redo actions can be performed for hided or shown columns.
RowDragAndDrop	Undo redo actions can be performed for row drag and drop.
TaskbarDragAndDrop	Undo redo actions can be performed for taskbar drag and drop.
PreviousTimeSpan	Undo redo actions can be performed for previous time span acton.
NextTimeSpan	Undo redo actions can be performed for next time span action.

In the following code example, Edit and Delete actions are specified in undoRedoActions property.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { SortService,RowDDService,FilterService,ResizeService,ReorderService, ToolbarService, EditService,UndoRedoService,ColumnMenuService } from '@syncfusion/ej2-angular-gantt'




import { Component, ViewEncapsulation, OnInit } from '@angular/core';

import { ToolbarItem, EditSettingsModel, GanttAction } from '@syncfusion/ej2-angular-gantt';
import { projectNewData } from './data';

@Component({
imports: [
         GanttModule
    ],

providers: [SortService,RowDDService,FilterService,ResizeService,ReorderService, ToolbarService, EditService,UndoRedoService,ColumnMenuService],
standalone: true,
    selector: 'app-root',
    template:
       `<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [allowSorting]='true' [allowFiltering]='true' [toolbar]="toolbar" [enableUndoRedo]='true' [showColumnMenu]='true'
       [allowResizing]='true' [allowReordering]='true' [allowRowDragAndDrop]='true' [taskFields]="taskSettings" [undoRedoActions]="undoRedoActions" [editSettings] = "editSettings"></ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    // Data for Gantt
    public data?: object[];
    public taskSettings?: object;
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItem[];
    public undoRedoActions?: GanttAction[];
    public ngOnInit(): void {
        this.data = projectNewData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        this.editSettings = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            showDeleteConfirmDialog: true
        },
        this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
        'PrevTimeSpan', 'NextTimeSpan','Undo','Redo'],
        this.undoRedoActions = ['Edit', 'Delete']
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Configuring the Storage Step Count for Undo and Redo Actions

You can specify the number of actions to be stored for undo and redo operations using the undoRedoStepsCount property.

By default, the value of undoRedoStepsCount is set to 10.

When the number of actions performed exceeds the undoRedoStepsCount, the oldest action in the undo collection is removed, and the latest action performed is added to the collection. This ensures that the number of stored actions does not exceed the specified limit, maintaining efficient memory usage.

In the following example, undoRedoStepsCount value is set to 5.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { SortService,RowDDService,FilterService,ResizeService,ReorderService, ToolbarService, EditService,UndoRedoService,ColumnMenuService } from '@syncfusion/ej2-angular-gantt'




import { Component, ViewEncapsulation, OnInit } from '@angular/core';

import { ToolbarItem, EditSettingsModel, GanttAction } from '@syncfusion/ej2-angular-gantt';
import { projectNewData } from './data';

@Component({
imports: [
         GanttModule
    ],

providers: [SortService,RowDDService,FilterService,ResizeService,ReorderService, ToolbarService, EditService,UndoRedoService,ColumnMenuService],
standalone: true,
    selector: 'app-root',
    template:
       `<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [allowSorting]='true' [allowFiltering]='true' [toolbar]="toolbar" [enableUndoRedo]='true' [showColumnMenu]='true'
       [allowResizing]='true' [allowReordering]='true' [allowRowDragAndDrop]='true' [undoRedoStepsCount]="undoRedoStepsCount" [taskFields]="taskSettings" [undoRedoActions]="undoRedoActions" [editSettings] = "editSettings"></ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    // Data for Gantt
    public data?: object[];
    public taskSettings?: object;
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItem[];
    public undoRedoStepsCount?: number;
    public undoRedoActions?: GanttAction[];
    public ngOnInit(): void {
        this.data = projectNewData;
        this.undoRedoStepsCount = 5;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        this.editSettings = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            showDeleteConfirmDialog: true
        },
        this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
        'PrevTimeSpan', 'NextTimeSpan','Undo','Redo'],
        this.undoRedoActions = ['Add', 'Edit', 'Delete', 'Search','Sorting','Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
        'PreviousTimeSpan', 'NextTimeSpan','ColumnState']
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Perform undo redo actions programatically

You can perform undo and redo actions programatically using undo and redo methods.

The following code example demonstrates how to invoke the undo and redo method by clicking the external button.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { SortService,RowDDService,FilterService,ResizeService,ReorderService, ToolbarService, EditService,UndoRedoService,ColumnMenuService } from '@syncfusion/ej2-angular-gantt'




import { Component, ViewEncapsulation, OnInit,ViewChild } from '@angular/core';

import { ToolbarItem, EditSettingsModel, GanttAction,GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { projectNewData } from './data';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
imports: [
         GanttModule
    ],

providers: [SortService,RowDDService,FilterService,ResizeService,ReorderService, ToolbarService, EditService,UndoRedoService,ColumnMenuService],
standalone: true,
    selector: 'app-root',
    template:
       `<button ejs-button id='undo' (click)='undo()'>Undo</button>
       <button ejs-button id='redo' (click)='redo()'>Redo</button> 
       <ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [allowSorting]='true' [allowFiltering]='true' [toolbar]="toolbar" [enableUndoRedo]='true' [showColumnMenu]='true'
       [allowResizing]='true' [allowReordering]='true' [allowRowDragAndDrop]='true' [taskFields]="taskSettings" [undoRedoActions]="undoRedoActions" [editSettings] = "editSettings"></ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    // Data for Gantt
    public data?: object[];
    public taskSettings?: object;
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItem[];
    public undoRedoActions?: GanttAction[];
    @ViewChild('gantt', {static: true})
    public ganttObj?: GanttComponent| any;
    public ngOnInit(): void {
        this.data = projectNewData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        this.editSettings = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            showDeleteConfirmDialog: true
        },
        this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
        'PrevTimeSpan', 'NextTimeSpan','Undo','Redo'],
        this.undoRedoActions = ['Add', 'Edit', 'Delete', 'Search','Sorting','Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
        'PreviousTimeSpan', 'NextTimeSpan','ColumnState']
    }
    undo(): void {
        this.ganttObj.undo();
    };
    redo(): void {
        this.ganttObj.redo();
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Retrieve undo and redo stack collection

By default, when an undo or redo action is performed, the actions are stored in an array collection. To retrieve the undo and redo stack array collections, you can use the getUndoActions and getRedoActions methods.

The following code example demonstrates how to retrieve the undo and redo collection using method by clicking the external button.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { SortService,RowDDService,FilterService,ResizeService,ReorderService, ToolbarService, EditService,UndoRedoService,ColumnMenuService } from '@syncfusion/ej2-angular-gantt'




import { Component, ViewEncapsulation, OnInit,ViewChild } from '@angular/core';

import { ToolbarItem, EditSettingsModel, GanttAction,GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { projectNewData } from './data';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
imports: [
         GanttModule
    ],

providers: [SortService,RowDDService,FilterService,ResizeService,ReorderService, ToolbarService, EditService,UndoRedoService,ColumnMenuService],
standalone: true,
    selector: 'app-root',
    template:
       `<button ejs-button id='getundocollection' (click)='getundocollection()'>GetUndoCollection</button>
       <button ejs-button id='getredocollection' (click)='getredocollection()'>GetRedoCollection</button> 
       <ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [allowSorting]='true' [allowFiltering]='true' [toolbar]="toolbar" [enableUndoRedo]='true' [showColumnMenu]='true'
       [allowResizing]='true' [allowReordering]='true' [allowRowDragAndDrop]='true' [taskFields]="taskSettings" [undoRedoActions]="undoRedoActions" [editSettings] = "editSettings"></ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    // Data for Gantt
    public data?: object[];
    public taskSettings?: object;
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItem[];
    public undoRedoActions?: GanttAction[];
    @ViewChild('gantt', {static: true})
    public ganttObj?: GanttComponent| any;
    public ngOnInit(): void {
        this.data = projectNewData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        this.editSettings = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            showDeleteConfirmDialog: true
        },
        this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
        'PrevTimeSpan', 'NextTimeSpan','Undo','Redo'],
        this.undoRedoActions = ['Add', 'Edit', 'Delete', 'Search','Sorting','Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
        'PreviousTimeSpan', 'NextTimeSpan','ColumnState']
    }
    getundocollection(): void {
        console.log(this.ganttObj.getUndoActions());
    };
    getredocollection(): void {
        console.log(this.ganttObj.getRedoActions());
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Clear undo and redo collection

At any point, you can clear the undo and redo collections using clearUndoCollection and clearRedoCollection methods. This allows you to reset the undo and redo stacks as needed during runtime.

The following code example demonstrates how to clear the undo and redo collection using method by clicking the external button.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { SortService,RowDDService,FilterService,ResizeService,ReorderService, ToolbarService, EditService,UndoRedoService,ColumnMenuService } from '@syncfusion/ej2-angular-gantt'




import { Component, ViewEncapsulation, OnInit,ViewChild } from '@angular/core';

import { ToolbarItem, EditSettingsModel, GanttAction,GanttComponent } from '@syncfusion/ej2-angular-gantt';
import { projectNewData } from './data';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

@Component({
imports: [
         GanttModule
    ],

providers: [SortService,RowDDService,FilterService,ResizeService,ReorderService, ToolbarService, EditService,UndoRedoService,ColumnMenuService],
standalone: true,
    selector: 'app-root',
    template:
       `<button ejs-button id='clearundocollection' (click)='clearundocollection()'>ClearUndoCollection</button>
       <button ejs-button id='clearredocollection' (click)='clearredocollection()'>ClearRedoCollection</button> 
       <ejs-gantt #gantt id="ganttDefault" height="430px" [dataSource]="data" [allowSorting]='true' [allowFiltering]='true' [toolbar]="toolbar" [enableUndoRedo]='true' [showColumnMenu]='true'
       [allowResizing]='true' [allowReordering]='true' [allowRowDragAndDrop]='true' [taskFields]="taskSettings" [undoRedoActions]="undoRedoActions" [editSettings] = "editSettings"></ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent{
    // Data for Gantt
    public data?: object[];
    public taskSettings?: object;
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItem[];
    public undoRedoActions?: GanttAction[];
    @ViewChild('gantt', {static: true})
    public ganttObj?: GanttComponent| any;
    public ngOnInit(): void {
        this.data = projectNewData;
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        },
        this.editSettings = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true,
            allowTaskbarEditing: true,
            showDeleteConfirmDialog: true
        },
        this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Search', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
        'PrevTimeSpan', 'NextTimeSpan','Undo','Redo'],
        this.undoRedoActions = ['Add', 'Edit', 'Delete', 'Search','Sorting','Filtering', 'ZoomIn', 'ZoomOut', 'ZoomToFit','Indent','Outdent', 
        'PreviousTimeSpan', 'NextTimeSpan','ColumnState']
    }
    clearundocollection(): void {
        this.ganttObj.clearUndoCollection();
    };
    clearredocollection(): void {
        this.ganttObj.clearRedoCollection();
    };
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));