Back to the Documentation

Spreadsheet Change History

All important changes in the spreadsheet are tracked under the History internal container. From version 8 on, the history is one array shared for all worksheets. In this section, we provide a few more details about the spreadsheet changes tracker.

Documentation

Methods

The undo and redo methods are normally invoked by the CTRL+Z, CTRL+Y keyboard shortcut. The following methods can be called programmatically, as follows:

Method Description
undo() Undo the last spreadsheet changes.
undo() : void
redo() Redo the most recent spreadsheet changes.
redo() : void
setHistory(object) Redo the most recent spreadsheet changes.
setHistory(history: Object) : void
resetHistory() Redo the most recent spreadsheet changes.
resetHistory() : void

Events

Events related to the history changes tracker.

Event Description
onredo onredo(worksheet: Object, info: Object) : null
The info array contains all necessary information about the history and depends on which change was performed.
onundo onundo(worksheet: Object, info: Object) : null
The info array contains all necessary information about the history and depends on which change was performed.

Example

As explained above, the history actions are available on the spreadsheet level.

<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id='spreadsheet'></div>

<br/>
<input type="button" value="Undo" id="undobtn" />
<input type="button" value="Redo" id="redobtn" />
<input type="button" value="Reset" id="resetbtn" />

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('YzgwZDI2NmI0ZmRhMGFiN2FjNTdjYjEwN2ViMmU2Y2QzMjljMmVmOTY3MDY0YzI5ZjI1NGMwOTQ4NjkxM2E2OGNhMjZiOTliMzY2NzNhMTBjNTA1Mjg3ZTM0NjY4NmI0OGYwOWQwZWI3YzA1NzQ1YWU5ZGZlMDRiMWVkZjU1MzgsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJNE16QXdORFEzTENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create the spreadsheet
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        minDimensions: [8, 8],
    }],
});

document.getElementById("undobtn").onclick = () => spreadsheet[0].undo()
document.getElementById("redobtn").onclick = () => spreadsheet[0].redo()
document.getElementById("resetbtn").onclick = () => spreadsheet[0].parent.resetHistory()
</script>
</html>