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

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:

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:

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:

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

Implements

IDisposable

Inheritance

DisposableObject

DesignerToolbarExtension

constructor(dashboardControl)

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

Declaration

constructor(
    dashboardControl: DashboardControl,
    options?: DesignerToolbarExtensionOptions
)

Parameters

Name	Type	Description
dashboardControl	DashboardControl
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

designerToViewerAction: 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

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

off: EventSubscriber<DesignerToolbarExtensionEvents>

Property Value

Type	Description
EventSubscriber<DesignerToolbarExtensionEvents>	An event subscription.

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

on: EventSubscriber<DesignerToolbarExtensionEvents>

Property Value

Type	Description
EventSubscriber<DesignerToolbarExtensionEvents>	An event subscription.

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

template: 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

viewerToDesignerAction: 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

dispose(): void

start Method

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

Declaration

start(): void

stop Method

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

Declaration

stop(): void