Undo / Redo

This is useful if you've made a mistake or want to undo changes for any other reason.

You can undo and redo many actions in OrgChart Resct, and you have counters for both. Every undo/redo action is saved in the browser window.sessionStorage and can also be saved in a database.

How to add undo/redo buttons

You just need to add the undoRedoStorageName property in the configuration.
This string will be used as the storage name:

undoRedoStorageName="undoRedoStorage"

Undo Redo

How to update the database

With the undo/redo option you should use the onUpdated method to update your database:

onUpdated={function (this: any) {
  console.log("Updated data:", this.config.data);
  //post config data to your server

  // this.config.data
  // this.config.slinks
  // ...
}}

Database update

UI customization

You can use the onChange method to create your own UI.

add buttons:

<button id="btn_undo" onClick={() => chartRef.current?.undo()}>Undo</button>
<button id="btn_redo" onClick={() => chartRef.current?.redo()}>Redo</button>

use onChange:

useEffect(() => {
  const chart = chartRef.current;
  if (chart) {
    chart.undoRedoUI.onChange(function(args){        
      const btn_undo = document.getElementById("btn_undo") as HTMLButtonElement;
      const btn_redo = document.getElementById("btn_redo") as HTMLButtonElement;
      btn_undo.innerHTML = `undo (${args.undoStepsCount})`;          
      btn_redo.innerHTML = `redo (${args.redoStepsCount})`;        
      btn_undo.disabled = args.undoStepsCount == 0;
      btn_redo.disabled = args.redoStepsCount == 0;
      return false;
    });
  }
}, []);

Here is a code demo:

Undo / Redo UI Customization