Skip to main content

toolbar

Description​

Optional. An array of icon objects which sets a toolbar with buttons for items

Usage​

toolbar?: [
    {
        id: string,
        content: string,
        check?: function,
        css?: function,
        tooltip?: string
    },
    {...} // other icon objects
];

Parameters​

The toolbar array includes a set of icon objects. Each icon object can have the following parameters:

  • id - (required) the id of the icon
  • content - (required) the content of the icon. It can contain an HTML element with the name of the icon class
  • check - (optional) checks whether the icon should be applied to the item. The function takes an item object and returns true, if the icon will be rendered for this item
  • css - (optional) the function which returns the name(s) of CSS class(es) that should be applied to the item
  • tooltip - (optional) a tooltip which appears on hovering over the icon

Example​

const diagram = new dhx.Diagram("diagram_container", { 
    type: "org",
    select: true,
    // setting a toolbar with buttons for items
    toolbar: [
        {
            id: "add",
            content: "<i className='dxi dxi-plus-box'>",
            check: item => !item.assistant && !item.partner,
            tooltip: "Add new shape"
        },
        {
            id: "download",
            content: "<i className='dxi dxi-download'></i>",
            tooltip: "Download to PDF"
        },
        {
            id: "remove",
            content: "<i className='dxi dxi-delete-outline'>",
            check: item => item.parent,
            css: () => "dhx_diagram_toolbar__icon--remove",
            tooltip: "Remove"
        }
    ]
});

Change log:

  • The tooltip parameter is added in v5.0

Related articles:

Related sample: Diagram. Configuration. Shape toolbar