items

Description

Optional. An array with controls displayed on Toolbar of Diagram Editor

Usage

items?: (object | string)[];

Configuring items via strings

The items property allows you to specify Service elements as an array of strings:

items: [ "file", "edit", "view", "arrange", "spacer", "scale" ];

The full list of service elements you can see here.

Configuring items via objects

The items property allows you to specify Service elements and Base elements as an array of objects:

items: [
    {
        type: string,
        id?: string,
        value?: string,
        hotkey?: string,
        icon?: string,
        hidden?: boolean,
        disabled?: boolean,
        css?: string | string[],
        items?: (string | object)[],
        checkIcon?: (editor: object) => string,
        handler?: (editor: object, event: Event) => void
    }, {...}
];

Parameters

For all service elements, excluding separator / spacer / scale, you can specify an object with the following parameters:

type - (required) - the type of a service element. The full list of service element types you can see here
id - (optional) - the ID of a service element. By default, the ID of a service element includes $ and the type of the service element: $file
value - (optional) - the label of a service element
hotkey - (optional) - the hot key combination label of a service element
icon - (optional) - the css class of a service element icon
hidden - (optional) - hides a service element
disabled - (optional) - disables a service element
css - (optional) - applies a custom css class to a service element
items - (optional) - defines the structure of the child elements
checkIcon - (optional) - the handler that returns the icon css class. It is called with the following argument:
- editor - the Diagram Editor object
handler - (optional) - the handler that runs when the click or inputChange events occurs. It is called with the following arguments:
- editor - the Diagram Editor object
- event - a native event

Example 1

The example below shows how to configure Toolbar items via strings:

// Configuring items via strings
const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        // toolbar: true, // displays default Toolbar
        // or configure Toolbar via object
        toolbar: {
            css: "custom_css",
            navigationType: "pointer",
            items: [
                "file",
                "spacer",
                "scale"
            ]
        }
    }
});

Example 2

The example below shows how to configure Toolbar items via objects:

const editor = new dhx.DiagramEditor("editor_container", {
    type: "default",
    view: {
        toolbar: {
            css: "custom_css",
            navigationType: "pointer",
            items: [
                {
                    type: "file",
                    items: [
                        "importJson",
                        {
                            type: "exportJson",
                            value: "Export to JSON"
                        },
                        {
                            id: "custom_id_1",
                            type: "menuItem",
                            value: "Server export",
                            icon: "dxi dxi-vault",
                            items: [
                                "exportPdf",
                                {
                                    id: "custom_id_2",
                                    type: "menuItem",
                                    value: "PNG",
                                    handler: editor => {
                                        editor.diagram.export.png();
                                        // custom logic here
                                    }
                                }
                            ]
                        }
                    ]
                },
                "spacer",
                "scale"
            ]
        }
    }
});

Change log: Added in v6.0

Related article: Toolbar configuration

Description​

Usage​

Configuring items via strings​

Configuring items via objects​

Parameters​

Example 1​

Example 2​