UndoStack

The UndoStack class lets you add and undo/redo stack to a page, a form, or any element.

It tracks changes to regular HTML input elements as well as most Wijmo controls, handles the undo/redo keys automatically, and provides commands for executing undo and redo actions programmatically.

Learn about Wijmo | UndoStack API Reference

import 'bootstrap.css'; import '@mescius/wijmo.styles/wijmo.css'; import './styles.css'; import { UndoStack } from '@mescius/wijmo.undo'; import { ComboBox, InputNumber, InputDate, AutoComplete, MultiSelect, MultiAutoComplete } from '@mescius/wijmo.input'; import { FlexGrid } from '@mescius/wijmo.grid'; import { RadialGauge, NeedleLength, NeedleShape, ShowText } from '@mescius/wijmo.gauge'; import { CellRangeEventArgs } from '@mescius/wijmo.grid'; document.readyState === 'complete' ? init() : window.onload = init; function init() { // create controls new ComboBox('#country', { itemsSource: getCountries(), isRequired: false, selectedIndex: -1 }); new InputNumber('#amount', { format: 'c2', min: 0, step: 10, isRequired: false, value: null }); new InputDate('#date', { isRequired: false, value: null }); new ComboBox('#color', { itemsSource: getColors(), isRequired: false, selectedIndex: -1 }); new AutoComplete('#ac', { itemsSource: getColors(), selectedIndex: -1 }); new MultiSelect('#colors', { itemsSource: getColors() }); new MultiAutoComplete('#mac', { itemsSource: getColors(), selectedIndex: -1 }); new RadialGauge('#gauge', { thickness: .2, min: 0, max: 100, value: 50, isReadOnly: false, tickSpacing: 10, showTicks: true, showText: ShowText.Value, needleShape: NeedleShape.Outer, needleLength: NeedleLength.Inner }); // add a grid let g = new FlexGrid('#grid', { anchorCursor: true, frozenColumns: 2, allowAddNew: true, allowDelete: true, itemsSource: getData(), }); // add some data maps let col = g.getColumn('name'); col.dataMap = getNames(); col.dataMap.isEditable = true; col = g.getColumn('country'); col.dataMap = getCountries(); // add/delete grid rows in code document.getElementById('add-row').addEventListener('click', (e) => { g.focus(); let view = g.editableCollectionView; let newItem = view.addNew(); newItem.id = -1; newItem.name = 'new item'; newItem.active = true; g.onRowAdded(new CellRangeEventArgs(g.cells, g.selection)); // create undoable action view.commitNew(); e.preventDefault(); // don't submit the form }); document.getElementById('del-row').addEventListener('click', (e) => { g.focus(); let view = g.editableCollectionView; if (view.items.length) { let sel = g.selection; if (sel.row > -1) { let item = g.rows[sel.row].dataItem; g.onDeletingRow(new CellRangeEventArgs(g.cells, g.selection)); // create undoable action view.remove(item); } } e.preventDefault(); // don't submit the form }); document.getElementById('nr-top').addEventListener('click', (e) => { g.newRowAtTop = e.target.checked; }); // create undo/redo buttons let btnUndo = document.getElementById('undo'); let btnRedo = document.getElementById('redo'); let btnClear = document.getElementById('clear'); let cnt = document.getElementById('undo-cnt'); // create undo stack let undoStack = new UndoStack('#undoable-form', { maxActions: 50, stateChanged: (s) => { btnUndo.disabled = !s.canUndo; btnRedo.disabled = !s.canRedo; btnClear.disabled = !s.actionCount; cnt.textContent = s.actionCount.toString(); }, }); // hook up undo/redo/clear buttons btnUndo.addEventListener('click', () => { undoStack.undo(); }); btnRedo.addEventListener('click', () => { undoStack.redo(); }); btnClear.addEventListener('click', () => { undoStack.clear(); }); // create some data function getColors() { return 'Black,Blue,Brown,Green,Magenta,Orange,Pink,Purple,Red,Teal,Violet,White,Yellow'.split(','); } function getCountries() { return 'US,Germany,UK,Japan,Italy,Greece'.split(','); } function getNames() { return 'Abe,Bob,Chuck,Dan,Ed,Fred'.split(','); } function getData() { let countries = getCountries(), names = getNames(), data = []; for (let i = 0; i < 50; i++) { data.push({ id: i, name: names[i % names.length], country: countries[i % countries.length], active: i % 5 != 0, downloads: Math.round(Math.random() * 200000), sales: Math.round(Math.random() * 20000), }); } return data; } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>MESCIUS Wijmo UndoStack</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- SystemJS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.5/system.src.js" integrity="sha512-skZbMyvYdNoZfLmiGn5ii6KmklM82rYX2uWctBhzaXPxJgiv4XBwJnFGr5k8s+6tE1pcR1nuTKghozJHyzMcoA==" crossorigin="anonymous"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app'); </script> </head> <body> <div class="container-fluid"> <!-- undo/redo toolbar --> <div class="toolbar"> <button id="undo" class="btn btn-primary" disabled> <span class="arrow">&#x21B6;</span> Undo (ctrl+Z) </button> <button id="redo" class="btn btn-primary" disabled> <span class="arrow">&#x21B7;</span> Redo (ctrl+Y) </button> <button class="btn" disabled> Action Count: <span id="undo-cnt">0</span> </button> <button id="clear" class="btn btn-default" disabled> Clear Undo/Redo Stack </button> </div> <!-- undo/redo form --> <form id="undoable-form"> <div class="row"> <!-- HTML input elements --> <div class="col-md-5"> <h3>HTML Input Elements</h3> <div class="form-group"> <label for="firstName">First Name</label> <input id="firstName" class="form-control" placeholder="First Name" /> </div> <div class="form-group"> <label for="lastName">Last Name</label> <input id="lastName" class="form-control" placeholder="Last Name"/> </div> <div class="form-group"> <label for="select">Select</label> <select id="select" class="form-control"> <option value="value1">Apples</option> <option value="value2" selected>Oranges</option> <option value="value3">Grapes</option> </select> </div> <div class="form-group"> <label for="area">TextArea</label> <textarea id="area" class="form-control" placeholder="textarea"></textarea> </div> <div class="form-group label-indent"> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1" checked> Red </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> Green </label> <label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> Blue </label> </div> <div class="form-group label-indent"> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1" checked> Hot </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Cold </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> Medium </label> </div> </div> <!-- Wijmo controls --> <div class="col-md-7"> <h3>Wijmo Controls</h3> <div class="form-group"> <label for="country">Country</label> <div id="country" placeholder="Country"></div> </div> <div class="form-group"> <label for="amount">Amount</label> <div id="amount" placeholder="Amount"></div> </div> <div class="form-group"> <label for="date">Date</label> <div id="date" placeholder="Date"></div> </div> <div class="form-group"> <label for="color" title="ComboBox">Color</label> <div id="color"></div> </div> <div class="form-group"> <label for="ac" title="AutoComplete">Color</label> <div id="ac"></div> </div> <div class="form-group"> <label for="colors" title="MultiSelect">Colors</label> <div id="colors"></div> </div> <div class="form-group"> <label for="mac" title="MultiAutoComplete">Colors</label> <div id="mac"></div> </div> <div class="form-group"> <label for="gauge">Gauge</label> <div id="gauge"></div> </div> <div class="form-group"> <label for="grid">Grid</label> <div id="grid"></div> <button id="add-row" class="btn btn-primary"> Add Row in Code </button> <button id="del-row" class="btn btn-primary"> Delete Row in Code </button> <label> New Row At Top <input id="nr-top" class="wj-no-undo" type="checkbox"> </label> </div> </div> </div> </form> </div> </body> </html>
.toolbar { position: sticky; top: 0; z-index: 10; padding: 12px; margin-left: -12px; background: #eee; } .arrow { display: inline-block; transform: scale(2); margin-right: 8px; } .form-group label { min-width: 100px; text-align: right; margin-right: 12px; } .label-indent { margin-left: 100px; } .label-indent label { min-width: 0; } .form-control { display: inline-block; width: auto; } .btn { outline: none !important; } .wj-dropdown, .wj-inputnumber { width: 200px; } .wj-multi-autocomplete { width: 300px; } .wj-flexgrid { height: 250px; } .wj-radialgauge { display: inline-block; width: 200px; } .wj-gauge .wj-needle { fill: orangered; stroke: orangered; } .wj-gauge .wj-needle .wj-inner-needle-cap { fill: white; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { 'jszip': 'npm:jszip/dist/jszip.js', '@mescius/wijmo': 'npm:@mescius/wijmo/index.js', '@mescius/wijmo.input': 'npm:@mescius/wijmo.input/index.js', '@mescius/wijmo.styles': 'npm:@mescius/wijmo.styles', '@mescius/wijmo.cultures': 'npm:@mescius/wijmo.cultures', '@mescius/wijmo.chart': 'npm:@mescius/wijmo.chart/index.js', '@mescius/wijmo.chart.analytics': 'npm:@mescius/wijmo.chart.analytics/index.js', '@mescius/wijmo.chart.animation': 'npm:@mescius/wijmo.chart.animation/index.js', '@mescius/wijmo.chart.annotation': 'npm:@mescius/wijmo.chart.annotation/index.js', '@mescius/wijmo.chart.finance': 'npm:@mescius/wijmo.chart.finance/index.js', '@mescius/wijmo.chart.finance.analytics': 'npm:@mescius/wijmo.chart.finance.analytics/index.js', '@mescius/wijmo.chart.hierarchical': 'npm:@mescius/wijmo.chart.hierarchical/index.js', '@mescius/wijmo.chart.interaction': 'npm:@mescius/wijmo.chart.interaction/index.js', '@mescius/wijmo.chart.radar': 'npm:@mescius/wijmo.chart.radar/index.js', '@mescius/wijmo.chart.render': 'npm:@mescius/wijmo.chart.render/index.js', '@mescius/wijmo.chart.webgl': 'npm:@mescius/wijmo.chart.webgl/index.js', '@mescius/wijmo.chart.map': 'npm:@mescius/wijmo.chart.map/index.js', '@mescius/wijmo.gauge': 'npm:@mescius/wijmo.gauge/index.js', '@mescius/wijmo.grid': 'npm:@mescius/wijmo.grid/index.js', '@mescius/wijmo.grid.detail': 'npm:@mescius/wijmo.grid.detail/index.js', '@mescius/wijmo.grid.filter': 'npm:@mescius/wijmo.grid.filter/index.js', '@mescius/wijmo.grid.search': 'npm:@mescius/wijmo.grid.search/index.js', '@mescius/wijmo.grid.grouppanel': 'npm:@mescius/wijmo.grid.grouppanel/index.js', '@mescius/wijmo.grid.multirow': 'npm:@mescius/wijmo.grid.multirow/index.js', '@mescius/wijmo.grid.transposed': 'npm:@mescius/wijmo.grid.transposed/index.js', '@mescius/wijmo.grid.transposedmultirow': 'npm:@mescius/wijmo.grid.transposedmultirow/index.js', '@mescius/wijmo.grid.pdf': 'npm:@mescius/wijmo.grid.pdf/index.js', '@mescius/wijmo.grid.sheet': 'npm:@mescius/wijmo.grid.sheet/index.js', '@mescius/wijmo.grid.xlsx': 'npm:@mescius/wijmo.grid.xlsx/index.js', '@mescius/wijmo.grid.selector': 'npm:@mescius/wijmo.grid.selector/index.js', '@mescius/wijmo.grid.cellmaker': 'npm:@mescius/wijmo.grid.cellmaker/index.js', '@mescius/wijmo.nav': 'npm:@mescius/wijmo.nav/index.js', '@mescius/wijmo.odata': 'npm:@mescius/wijmo.odata/index.js', '@mescius/wijmo.olap': 'npm:@mescius/wijmo.olap/index.js', '@mescius/wijmo.rest': 'npm:@mescius/wijmo.rest/index.js', '@mescius/wijmo.pdf': 'npm:@mescius/wijmo.pdf/index.js', '@mescius/wijmo.pdf.security': 'npm:@mescius/wijmo.pdf.security/index.js', '@mescius/wijmo.viewer': 'npm:@mescius/wijmo.viewer/index.js', '@mescius/wijmo.xlsx': 'npm:@mescius/wijmo.xlsx/index.js', '@mescius/wijmo.undo': 'npm:@mescius/wijmo.undo/index.js', '@mescius/wijmo.interop.grid': 'npm:@mescius/wijmo.interop.grid/index.js', '@mescius/wijmo.touch': 'npm:@mescius/wijmo.touch/index.js', '@mescius/wijmo.cloud': 'npm:@mescius/wijmo.cloud/index.js', '@mescius/wijmo.barcode': 'npm:@mescius/wijmo.barcode/index.js', '@mescius/wijmo.barcode.common': 'npm:@mescius/wijmo.barcode.common/index.js', '@mescius/wijmo.barcode.composite': 'npm:@mescius/wijmo.barcode.composite/index.js', '@mescius/wijmo.barcode.specialized': 'npm:@mescius/wijmo.barcode.specialized/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'bootstrap.css': 'npm:bootstrap/dist/css/bootstrap.min.css', 'css': 'npm:systemjs-plugin-css/css.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' }, } }); })(this);