DesignerToolbarItem Interface

An item in the Designer Toolbar.

Declaration

export interface DesignerToolbarItem extends dxToolbarItem

Remarks

The Designer Toolbar contains a set of predefined toolbar items and allows you to add custom toolbar items.

Handle the DesignerToolbarExtensionOptions.onPreparing event and modify the e.items collection:

• Access predefined toolbar items by name to customize or remove them.
• Add custom commands. More information: items.

To set the location of items on the toolbar, use the location property. More information: Specify Item Location.

You can use built-in icons for those DevExtreme UI components that have an icon property. Pick any icon and assign its name to the UI element’s icon property.

To modify the Designer Toolbar’s elements, handle the DesignerToolbarExtensionOptions.onPreparing event to customize the toolbar before it is rendered:

Javascript

function customizeDesignerToolbar(e) {
    let dashboardControl = e.component;
    // Add a "Reload" button.
    e.items.unshift({
        widget: 'dxButton',
        cssClass: 'dx-refresh-custom-button',
        options: {
            type: 'default',
            icon: 'pulldown'
        },
        location: 'before',
        onClick: () => {
            dashboardControl.refresh();
        }
    },
    {
        name: "separator",
        location: 'before'
    });
    // Add a "Viewer" button.
    e.items.push({
        widget: 'dxButton',
        cssClass: 'dx-viewer-custom-button',
        options: {
            type: 'default',
            text: 'Viewer'
        },
        location: 'after',
        onClick: () => {
            dashboardControl.switchToViewer();
        }
    });
    // Remove the width editing UI elements.
    e.items = e.items.filter(function (item) {
        return ['widthLabel', 'widthButtonGroup', 'widthNumberBox', 'widthPixelLabel', 'widthSeparator'].indexOf(item.name) === -1
    });
}

CSS

.dx-toolbar-before > .dx-toolbar-item.dx-refresh-custom-button {
    padding: 5px;
}
.dx-toolbar-after > .dx-toolbar-item.dx-viewer-custom-button {
    padding: 5px;
}

The image below shows the result:

Refer to the DevExtreme documentation for more information about toolbar configuration: Configuration.

Properties

name Property

Specifies a name of the Designer Toolbar item.

Declaration

name?: string

Property Value

Type	Description
string	A string that is a name of the Designer Toolbar item.

Remarks

The Designer Toolbar contains a set of predefined toolbar items. You can access them by name to customize or remove them:

Name	Description
undoButton	A dxButton UI component that undoes the last operation.
redoButton	A dxButton UI component that reapplies the last operation that was undone.
undoRedoSeparator	A 1px vertical line that is located after redoButton.
widthLabel	A label in the width editing widgets.
widthButtonGroup	A dxButtonGroup UI component in the width editing widgets.
widthNumberBox	A dxNumberBox UI component in the width editing widgets.
widthSeparator	A 1px vertical line that is used as a separator after widthNumberBox.
heightLabel	A label in the height editing widgets.
heightButtonGroup	A dxButtonGroup UI component in the height editing widgets.
heightNumberBox	A dxNumberBox UI component in the height editing widgets.
heightSeparator	A 1px vertical line that is located after heightNumberBox.
separator	A 1px vertical line that you can use as a separator between toolbar items.

The following code adds a separator to the end of the before collection:

function customizeDesignerToolbar(e) {
    e.items.push({
        name: "separator",
        location: 'before'
    })    
}