Undo redo in Angular Spreadsheet component

30 Jul 20265 minutes to read

Undo option helps you to undone the last action performed and Redo option helps you to do the same action which is reverted in the Spreadsheet. You can use the allowUndoRedo property to enable or disable undo redo functionality in spreadsheet.

The default value for allowUndoRedo property is true.

By default, the UndoRedo module is injected internally into Spreadsheet to perform undo redo.

Undo

It reverses the last action you performed with Spreadsheet. Undo can be done by any of the following ways:

  • Select the undo item from the HOME tab in the Ribbon toolbar.
  • Use the Ctrl + Z keyboard shortcut.
  • Use the undo method programmatically.

Redo

It reverses the last undo action you performed with Spreadsheet. Redo can be done by any of the following ways:

  • Select the redo item from the HOME tab in the Ribbon toolbar.
  • Use the Ctrl + Y keyboard shortcut.
  • Use the redo method programmatically.

Update custom actions in UndoRedo collection

You can add your own custom actions to the UndoRedo collection by using the updateUndoRedoCollection method. You can also customize the undo and redo behavior of your custom action by using actionComplete event.

The following code example shows How to update and customize your own actions for undo redo functionality in the Spreadsheet control.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SpreadsheetAllModule } from '@syncfusion/ej2-angular-spreadsheet'



import { Component, OnInit,ViewChild } from '@angular/core';
import { defaultData } from './datasource';
import { addClass, removeClass } from '@syncfusion/ej2-base';
import { SpreadsheetComponent, getRangeIndexes } from '@syncfusion/ej2-angular-spreadsheet';

@Component({
imports: [
        
        SpreadsheetAllModule
    ],


standalone: true,
    selector: 'app-container',
    template: "<button id='customBtn' class='e-btn' (click)='updateCollection()'> add/remove Class</button>   <ejs-spreadsheet #spreadsheet (actionComplete)='actionComplete($event)'> <e-sheets> <e-sheet> <e-ranges> <e-range [dataSource]='defaultData'></e-range></e-ranges><e-columns><e-column [width]=130></e-column><e-column [width]=92></e-column><e-column [width]=96></e-column></e-columns></e-sheet></e-sheets></ejs-spreadsheet>"
})
export class AppComponent implements OnInit {

    public defaultData?: object[];
    @ViewChild('spreadsheet') public spreadsheetObj?: SpreadsheetComponent;
    ngOnInit(): void {
        this.defaultData = defaultData;
    }
    actionComplete (args: any) {
        let actionEvents: any = args;
        if (actionEvents.eventArgs.action == "customCSS") {
            let Element:HTMLElement = this.spreadsheetObj!.getCell(actionEvents.eventArgs.rowIdx,actionEvents.eventArgs.colIdx);
            if (actionEvents.isUndoRedo && actionEvents.isUndo) {
                removeClass([Element],'customClass'); // To remove the custom class in undo action
            }
            else {
                addClass([Element],'customClass');// To add the custom class in redo action
            }
        }
    }
    updateCollection() {
        var cell = this.spreadsheetObj!.getActiveSheet().activeCell;
        var cellIdx = getRangeIndexes(cell as any);
        var Element= this.spreadsheetObj!.getCell(cellIdx[0], cellIdx[1]);
        if (!Element.classList.contains("customClass")) {
            Element.classList.add('customClass'); // To add the custom class in active cell element
            this.spreadsheetObj!.updateUndoRedoCollection({ eventArgs: { class: 'customClass', rowIdx: cellIdx[0], colIdx: cellIdx[1], action: 'customCSS' } }); // To update the undo redo collection
        }
  }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Note

You can refer to our Angular Spreadsheet Editor feature tour page for its groundbreaking feature representations. You can also explore our Angular Spreadsheet example to knows how to present and manipulate data.

See Also