DesignerToolbarExtensionOptions Interface

Provides options for customizing the DesignerToolbarExtension.

Declaration

export interface DesignerToolbarExtensionOptions

Remarks

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:

Properties

items Property

Specifies an array of items displayed by the Designer Toolbar.

Declaration

items?: Array<DevExpress.Dashboard.Designer.DesignerToolbarItem | string>

Property Value

Type	Description
string | DesignerToolbarItem[]	An array of items displayed by the Designer Toolbar.

Remarks

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

To apply a style to an item, implement a CSS class, which may contain various properties, and assign the name of this class to the cssClass property of the item.

Refer to the dxToolbar API for information about the available UI component options.

onPreparing Property

A handler for the event that occurs before the Designer Toolbar is created.

Declaration

onPreparing?: (args: DesignerToolbarArgs) => void

Property Value

Type	Description
(args: DesignerToolbarArgs) => void	A function that is executed before the Designer Toolbar is created.

Remarks

Use the preparing event when you need to customize the existing items in the Designer Toolbar.

Use the following event handlers depending on the platform:

• HTML JavaScript: DesignerToolbarExtensionOptions.onPreparing
• ASP.NET Core: DesignerToolbarOptionBuilder.OnPreparing

For more information about event handling and customization, see the following topic: Extensions Overview.