Skip to main content
All docs
V24.2

DesignerToolbarExtension Class

A Web Dashboard extension that allows you to display predefined and custom commands in the toolbar when the control operates in Designer mode.

#Declaration

TypeScript
export class DesignerToolbarExtension extends DisposableObject implements ISupportOptionExtension<DesignerToolbarExtensionOptions>

#Remarks

The Designer Toolbar allows you to access most frequently used commands with a single click. The underlying widget is dxToolbar. The unique extension name is designerToolbar.

The default Designer Toolbar displays layout options and undo/redo buttons.

If you need to update the Designer Toolbar items, reassign the entire items array as shown in the following example:

javascript
dashboardControl.option("extensions.designerToolbar.items", [newItems]);

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

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
    });
}

The image below shows the result:

web-dashboard-designer-toolbar-example

See the following topic for information on how to use the DashboardControl’s client-side API: Extensions Overview.

#Implements

ISupportOptionExtension

#Inheritance

DisposableObject
DesignerToolbarExtension

#constructor(dashboardControl)

Initializes a new instance of the DesignerToolbarExtension class with specified settings.

#Declaration

TypeScript
constructor(
    dashboardControl: DevExpress.Dashboard.DashboardControl,
    options?: DesignerToolbarExtensionOptions
)

#Parameters

Name Type Description
dashboardControl DashboardControl

A Web Dashboard control that owns the extension.

options DesignerToolbarExtensionOptions

A DesignerToolbarExtensionOptions object that contains the extension options.

#Properties

#designerToViewerAction Property

Specifies an action executed at the moment of switching from Designer to Viewer.

#Declaration

TypeScript
designerToViewerAction: DevExpress.Dashboard.SequenceAction

#Property Value

Type Description
SequenceAction

An action executed at the moment of switching from Designer to Viewer.

#name Property

Specifies the unique extension name.

#Declaration

TypeScript
name: string

#Property Value

Type Description
string

The unique extension name. The return value is designerToolbar.

#Remarks

Warning

Do not change the unique name of the extension registered in the Web Dashboard to avoid exceptions.

#off Property

Unsubscribes from the DesignerToolbarExtension’s events.

#Declaration

TypeScript
off: DevExpress.Dashboard.Internal.EventSubscriber<DesignerToolbarExtensionEvents>

#Property Value

Type
EventSubscriber<DesignerToolbarExtensionEvents>

#Remarks

The extension’s on and off methods help you subscribe to and unsubscribe from events.

#on Property

Subscribes to the DesignerToolbarExtension’s events.

#Declaration

TypeScript
on: DevExpress.Dashboard.Internal.EventSubscriber<DesignerToolbarExtensionEvents>

#Property Value

Type
EventSubscriber<DesignerToolbarExtensionEvents>

#Remarks

The extension’s on and off methods help you subscribe to and unsubscribe from events.

#template Property

Specifies a custom template for the Designer Toolbar.

#Declaration

TypeScript
template: DevExpress.Dashboard.KnockoutTemplate

#Property Value

Type Description
KnockoutTemplate

An object that defines a template.

#viewerToDesignerAction Property

Specifies an action executed at the moment of switching from Viewer to Designer.

#Declaration

TypeScript
viewerToDesignerAction: DevExpress.Dashboard.SequenceAction

#Property Value

Type Description
SequenceAction

An action executed at the moment of switching from Viewer to Designer.

#Methods

#dispose Method

Releases resources associated with a DesignerToolbarExtension instance.

#Declaration

TypeScript
dispose(): void

#start Method

Contains code that is executed when you register the dashboard extension.

#Declaration

TypeScript
start(): void

#stop Method

Contains code that is executed when you unregister the dashboard extension.

#Declaration

TypeScript
stop(): void