Undo/Redo

This is used if you've made a mistake or by any other reason you want to undo the changes you have made. You can undo and redo many actions in OrgChart JS and you have a counters for both. Evey undo/redo action is saved in the Window sessionStorage property and can be saved in the database too.

How to add undo/redo buttons:

You just need to add the undoRedoStorageName property in the configuration with a string value, that will be the name of the storage:

 
   Copy
    undoRedoStorageName: 'myStorageName',
    

Edit in BALKAN Code

How to update the database:

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

 
   Copy
chart.onUpdated(function(args){
    // post config data to your server
    // args.config.nodes
    // ...
});
    

Edit in BALKAN Code

UI customization:

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

HTML:

 
           Copy
<button id="btn_undo">Undo</button>
<button id="btn_redo">Redo</button>
    

 
   Copy
let btn_undo = document.getElementById('btn_undo');
let btn_redo = document.getElementById('btn_redo');

chart.undoRedoUI.onChange((args) => {    
    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;
});

btn_undo.addEventListener('click', function(){
chart.undo();
});

btn_redo.addEventListener('click', function(){
chart.redo();
});
    

Edit in BALKAN Code