Toolbar events overview

You can use the following Toolbar events of Suite 8:

Name	Description
afterHide	Fires after hiding a sub-item of Toolbar
beforeHide	Fires before hiding a sub-item of Toolbar
click	Fires after a click on a control
input	Fires on entering a text into the input field
inputBlur	Fires when a control is blurred
inputChange	Fires on changing the value in the Input control of Toolbar
inputFocus	Fires when a control is focused
keydown	Fires when any key is pressed and a control of Toolbar is in focus
openMenu	Fires on expanding a menu control

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        toolbar: true
    }
});
// handles the "click" event
editor.toolbar.events.on("click", (id, event) => {
    // some logic
});

TreeCollection events overview

You can use the following TreeCollection events of Suite 8:

Name	Description
afterAdd	Fires after adding a new item into a tree collection
afterRemove	Fires after removing a new item from a tree collection
beforeAdd	Fires before adding a new item into a tree collection
beforeRemove	Fires before removing an item from a tree collection
change	Fires when a tree collection is modified
filter	Fires after filtering a tree collection
load	Fires when items are loaded in a tree collection
loadError	Fires when loading of data fails
removeAll	Fires when all items are removed from a tree collection

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        toolbar: true
    }
});
// handles the "load" event
editor.toolbar.events.on("load", () => {
    // some logic here
});
// load new toolbar data
editor.toolbar.parse(["file", "spacer", "scale"]);