Undo redo in Vue Spreadsheet component
11 Jun 202410 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 istrue
.
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 HOME tab in Ribbon toolbar.
- Use
Ctrl + Z
keyboard shortcut to perform the undo. - 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 HOME tab in Ribbon toolbar.
- Use
Ctrl + Y
keyboard shortcut to perform the redo. - Use the
redo
method programmatically.
Update custom actions in UndoRedo collection
You can update your own custom actions in UndoRedo collection, by using the updateUndoRedoCollection
method. And also customize the undo redo operations 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.
<template>
<div>
<ejs-button id='customBtn' v-on:click.native="updateCollection">add/remove Class</ejs-button>
<ejs-spreadsheet ref="spreadsheet" :actionComplete="actionComplete">
<e-sheets>
<e-sheet>
<e-ranges>
<e-range :dataSource="dataSource"></e-range>
</e-ranges>
<e-columns>
<e-column :width="width1"></e-column>
<e-column :width="width2"></e-column>
</e-columns>
</e-sheet>
</e-sheets>
</ejs-spreadsheet>
</div>
</template>
<script setup>
import { ref } from "vue";
import { SpreadsheetComponent as EjsSpreadsheet, ColumnsDirective as EColumns, ColumnDirective as EColumn, RangesDirective as ERanges, RangeDirective as ERange, SheetsDirective as ESheets, SheetDirective as ESheet, getRangeIndexes } from "@syncfusion/ej2-vue-spreadsheet";
import { addClass, removeClass } from '@syncfusion/ej2-base';
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { defaultData } from './data.js';
const spreadsheet = ref(null);
const dataSource = defaultData;
const width1 = 130;
const width2 = 96;
const actionComplete = function (args) {
let actionEvents = args;
if (actionEvents.eventArgs.action == "customCSS") {
let Element = spreadsheet.value.ej2Instances.getCell(actionEvents.eventArgs.rowIdx, actionEvents.eventArgs.colIdx);
if (actionEvents.eventArgs.requestType == "undo") {
removeClass([Element], 'customClass'); // To remove the custom class in undo action
}
else {
addClass([Element], 'customClass');// To add the custom class in redo action
}
}
}
const updateCollection = function () {
let cell = spreadsheet.value.ej2Instances.getActiveSheet().activeCell;
let cellIdx = getRangeIndexes(cell);
let Element = spreadsheet.value.ej2Instances.getCell(cellIdx[0], cellIdx[1]);
if (!Element.classList.contains("customClass")) {
addClass([Element], 'customClass'); // To add the custom class in active cell element
spreadsheet.value.ej2Instances.updateUndoRedoCollection({ eventArgs: { class: 'customClass', rowIdx: cellIdx[0], colIdx: cellIdx[1], action: 'customCSS' } }); // To update the undo redo collection
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
.customClass.e-cell {
background-color: red;
}
</style>
<template>
<div>
<ejs-button id='customBtn' v-on:click.native="updateCollection">add/remove Class</ejs-button>
<ejs-spreadsheet ref="spreadsheet" :actionComplete="actionComplete">
<e-sheets>
<e-sheet>
<e-ranges>
<e-range :dataSource="dataSource"></e-range>
</e-ranges>
<e-columns>
<e-column :width="width1"></e-column>
<e-column :width="width2"></e-column>
</e-columns>
</e-sheet>
</e-sheets>
</ejs-spreadsheet>
</div>
</template>
<script>
import { SpreadsheetComponent, ColumnsDirective, ColumnDirective, RangesDirective, RangeDirective, SheetsDirective, SheetDirective, getRangeIndexes } from "@syncfusion/ej2-vue-spreadsheet";
import { addClass, removeClass } from '@syncfusion/ej2-base';
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { defaultData } from './data.js';
export default {
name: "App",
components: {
"ejs-button": ButtonComponent,
"ejs-spreadsheet": SpreadsheetComponent,
"e-sheets": SheetsDirective,
"e-sheet": SheetDirective,
"e-ranges": RangesDirective,
"e-range": RangeDirective,
"e-columns": ColumnsDirective,
"e-column": ColumnDirective
},
data: () => {
return {
dataSource: defaultData,
width1: 130,
width2: 96
}
},
methods: {
actionComplete: function (args) {
let actionEvents = args;
let spreadsheet = this.$refs.spreadsheet;
if (actionEvents.eventArgs.action == "customCSS") {
let Element = spreadsheet.ej2Instances.getCell(actionEvents.eventArgs.rowIdx, actionEvents.eventArgs.colIdx);
if (actionEvents.eventArgs.requestType == "undo") {
removeClass([Element], 'customClass'); // To remove the custom class in undo action
}
else {
addClass([Element], 'customClass');// To add the custom class in redo action
}
}
},
updateCollection: function () {
let spreadsheet = this.$refs.spreadsheet;
let cell = spreadsheet.ej2Instances.getActiveSheet().activeCell;
let cellIdx = getRangeIndexes(cell);
let Element = spreadsheet.ej2Instances.getCell(cellIdx[0], cellIdx[1]);
if (!Element.classList.contains("customClass")) {
addClass([Element], 'customClass'); // To add the custom class in active cell element
spreadsheet.ej2Instances.updateUndoRedoCollection({ eventArgs: { class: 'customClass', rowIdx: cellIdx[0], colIdx: cellIdx[1], action: 'customCSS' } }); // To update the undo redo collection
}
}
}
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-grids/styles/material.css';
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
.customClass.e-cell {
background-color: red;
}
</style>
Note
You can refer to our Vue Spreadsheet feature tour page for its groundbreaking feature representations. You can also explore our Vue Spreadsheet example to knows how to present and manipulate data.