Skip to main content

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:

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 articles: Toolbar configuration

Related sample: Diagram Editor. Default mode. Customization of toolbar. Added search by shapes