Example of Undo Redo Functional in React Gantt Component

/
/
GanttUndoRedo

This sample showcases the undo-redo functionality in the Gantt Chart, allowing users to revert or reapply their recent actions such as task edits, additions, and deletions.

More Details...

1
Project planning
7/1/20257/7/20255 days20
2
Requirement analysis
7/1/20257/2/20252 days50
3
Feasibility study
7/3/20257/4/20252 days02FS
4
Approval
7/7/20257/7/20251 day03FS
5
Design phase
7/4/20257/14/20257 days17
6
UI design
7/4/20257/8/20253 days40
7
UX design
7/9/20257/10/20252 days06FS
8
Design review
7/11/20257/11/20251 day07FS
9
Design finalization
7/14/20257/14/20251 day08FS
10
Development phase
7/14/20258/1/202515 days10
11
Frontend development
7/14/20257/18/20255 days30
12
Backend development
7/21/20257/25/20255 days011FS
13
API integration
7/28/20257/30/20253 days012FS
14
Unit testing
7/31/20258/1/20252 days013FS
15
Development complete
8/1/20258/1/20250 days014FS
16
Testing phase
8/4/20258/12/20257 days8
17
System testing
8/4/20258/6/20253 days20
18
Bug fixing
8/7/20258/8/20252 days017FS
19
Regression testing
8/11/20258/12/20252 days018FS
20
Testing complete
8/12/20258/12/20250 days019FS
21
Deployment phase
8/13/20258/18/20254 days5
22
Deployment preparation
8/13/20258/14/20252 days10
23
Production deployment
8/15/20258/15/20251 day022FS
24
Post deployment testing
8/18/20258/18/20251 day023FS
25
Deployment complete
8/18/20258/18/20250 days024FS
26
Project closure
8/18/20258/21/20254 days0
27
Documentation
8/18/20258/19/20252 days0
28
Client handover
8/20/20258/20/20251 day027FS
29
Feedback collection
8/21/20258/21/20251 day028FS
30
Closure complete
8/21/20258/21/20250 days029FS
Project planning
Requirement analysis
Feasibility study
Approval
Design phase
UI design
UX design
Design review
Design finalization
Development phase
Frontend development
Backend development
API integration
Unit testing
Development complete
Testing phase
System testing
Bug fixing
Regression testing
Testing complete
Deployment phase
Deployment preparation
Production deployment
Post deployment testing
Deployment complete
Project closure
Documentation
Client handover
Feedback collection
Closure complete
Description

The undo feature lets users reverse the most recent changes made to tasks, dependencies, columns, or timeline settings. The redo feature restores actions that were previously undone. Both can be triggered using keyboard shortcuts (Ctrl + Z for Undo, Ctrl + Y for Redo) or via toolbar buttons.

You can configure which actions are tracked using the undoRedoActions property. Supported actions include: Edit, Add, Delete, Sorting, ColumnReorder, ColumnResize, Search, Filtering, ZoomIn, ZoomOut, ZoomToFit, ColumnState, Indent, Outdent, RowDragAndDrop, TaskbarDragAndDrop, PreviousTimeSpan, and NextTimeSpan

The number of undo-redo steps stored can be controlled using the undoRedoStepsCount property, which defaults to 10.

In this demo, the undo-redo feature is enabled by setting enableUndoRedo to true


More information on the Essential® React Gantt Chart can be found in this documentation section.