Skip to main content

DHTMLX Kanban. Undo/redo with backend example

Undo and redo let users reverse accidental changes without fear of breaking the board. When combined with a backend, undo/redo operations also sync with the server, ensuring the database stays consistent with what users see.

Live example​

const { Kanban, Toolbar, RestDataProvider, defaultEditorShape, defaultCardShape } = kanban;
// Check Node.js backend repository here - https://github.com/web-widgets/kanban-node
// Check Go backend repository here -  https://github.com/web-widgets/kanban-go
const url = "https://docs.dhtmlx.com/kanban-backend";
const restProvider = new RestDataProvider(url);

const cardShape = {
    ...defaultCardShape,
    label: true,
    description: true,
    progress: true,
    start_date: true,
    end_date: true,
    priority: true,
    color: true,
    cover: true,
};

Promise.all([   
    restProvider.getCards(),
    restProvider.getColumns(),
    restProvider.getRows(),
]).then(([cards, columns, rows]) => {
    const board = new Kanban("#root", {
        cards,
        columns,
        rows,
        rowKey: "row",
        cardShape,
    });
    board.api.setNext(restProvider);

    new Toolbar("#toolbar", { api: board.api, items:["undo", "redo", "spacer", "addColumn", "addRow"]});
});
<!-- component containers -->
<div id="toolbar"></div>
<div id="root" style="height: calc(100% - 56px);"></div>

<!-- dataset -->
<script src="https://snippet.dhtmlx.com/codebase/data/kanban/01/dataset.js"></script>

The code adds "undo" and "redo" to the Toolbar items array alongside the standard buttons. The Kanban tracks an internal history of operations, and the toolbar buttons trigger undo/redo actions that both update the UI and send the corresponding reverse operations to the backend via RestDataProvider. No additional code is needed beyond specifying the toolbar items.

Solution overview​

  1. Set up backend integration with RestDataProvider and board.api.setNext(restProvider)
  2. Add "undo" and "redo" to the Toolbar items array: items: ["undo", "redo", "spacer", "addColumn", "addRow"]
  3. Undo/redo operations are automatically synced with the backend

Key points​

  • Built-in toolbar items: Just add "undo" and "redo" strings to the toolbar items array. No custom handler code needed
  • Backend sync is automatic: When connected via setNext, undo/redo operations are sent to the backend as reverse mutations
  • History is session-scoped: The undo history resets on page reload. It's not persisted to the backend
  • Works with all operations: Card add/update/delete/move, column changes, and row changes are all undoable

API reference​

Additional resources​