Skip to main content

DashboardPanelExtension Class

The Dashboard Panel extension that displays a list of available dashboards and lets you switch between the designer and viewer modes.

#Declaration

TypeScript
export class DashboardPanelExtension implements IExtension

#Remarks

Use the following code to register the DashboardPanelExtension extension and enable the Dashboard Panel:

javascript
// The dashboardControl variable is the obtained DashboardControl instance.
dashboardControl.registerExtension(new DashboardPanelExtension(dashboardControl));

#Implements

IExtension

#constructor(dashboardControl)

Initializes a new instance of the DashboardPanelExtension class.

#Declaration

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

#Parameters

Name Type Description
dashboardControl DashboardControl

A Web Dashboard control that owns the extension.

options DashboardPanelExtensionOptions

A DashboardPanelExtensionOptions object that contains the extension options.

#Properties

#allowSwitchToDesigner Property

Specifies whether the Dashboard Panel allows end-users to switch the Web Dashboard from the Viewer to Designer mode.

#Declaration

TypeScript
allowSwitchToDesigner: ko.Observable<boolean>

#Property Value

Type Description
Observable<boolean>

true, if the Dashboard Panel allows end-users to switch from the Viewer to Designer mode; otherwise, false.

#Remarks

When the allowSwitchToDesigner property is set to true, the Dashboard Panel displays the Edit in Designer button that allows an end-user to edit the currently selected dashboard.

Note

The allowSwitchToDesigner option is not in effect when the Web Dashboard operates in the ViewerOnly mode.

#availableDashboards Property

Gets an array of dashboards displayed in the Dashboard Panel.

#Declaration

TypeScript
availableDashboards: ko.ObservableArray<DevExpress.Dashboard.DashboardInfo>

#Property Value

Type Description
ObservableArray<DashboardInfo>

An array of the DashboardInfo objects that contain information about dashboards displayed in the Dashboard Panel.

#Remarks

To display the actual list of dashboards available in the dashboard storage, use the updateDashboardsList method.

#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.

#hidePanelAsync Property

Hides the Dashboard Panel asynchronously.

#Declaration

TypeScript
hidePanelAsync: (options: DevExpress.Dashboard.WorkingModeSwitchingOptions) => JQueryPromise<{}>

#Property Value

Type Description
(options: WorkingModeSwitchingOptions) => JQueryPromise<>

The WorkingModeSwitchingOptions object that returns a JQuery promise.

#Remarks

The code below hides the Dashboard Panel asynchronously and then adjusts the left indent of the DashboardControl using the surfaceLeft property.

JavaScript
function hideDashboardPanel() {
    // The dashboardControl variable is the obtained DashboardControl instance.
    var dashboardPanelExtension = dashboardControl.findExtension('dashboardPanel');
    dashboardPanelExtension.hidePanelAsync({}).done(function (e) {
          dashboardControl.surfaceLeft(e.surfaceLeft);
    });
}

#name Property

Specifies the unique extension name.

#Declaration

TypeScript
name: string

#Property Value

Type Description
string

The unique extension name. The return value is ‘dashboardPanel’.

#Remarks

Warning

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

#panelWidth Property

Specifies the Dashboard Panel’s width.

#Declaration

TypeScript
panelWidth: number

#Property Value

Type Description
number

An integer value that specifies the Dashboard Panel’s width (in pixels).

#selectedItemKeys Property

#Declaration

TypeScript
selectedItemKeys: ko.ObservableArray<string>

#Property Value

Type
ObservableArray<string>

#showPanelAsync Property

Invokes the Dashboard Panel asynchronously.

#Declaration

TypeScript
showPanelAsync: (options: DevExpress.Dashboard.WorkingModeSwitchingOptions) => JQueryPromise<{}>

#Property Value

Type Description
(options: WorkingModeSwitchingOptions) => JQueryPromise<>

The WorkingModeSwitchingOptions object that returns a JQuery promise.

#Remarks

The code below invokes the Dashboard Panel asynchronously and then adjusts the left indent of the DashboardControl using the surfaceLeft property.

JavaScript
function showDashboardPanel() {
    // The dashboardControl variable is the obtained DashboardControl instance.
    var dashboardPanelExtension = dashboardControl.findExtension('dashboardPanel');
    dashboardPanelExtension.showPanelAsync({}).done(function (e) {
        dashboardControl.surfaceLeft(e.surfaceLeft);
    });
}

#switchToDesigner Property

Switches the Web Dashboard to the Designer mode.

#Declaration

TypeScript
switchToDesigner: () => void

#Property Value

Type Description
() => void

A function that is executed when you switch the Web Dashboard’s working mode to Designer.

#Remarks

Use the switchToViewer method to switch the Web Dashboard to Viewer mode.

#switchToViewer Property

Switches the Web Dashboard to the Viewer mode.

#Declaration

TypeScript
switchToViewer: () => void

#Property Value

Type Description
() => void

A function that is executed when you switch the Web Dashboard’s working mode to Viewer.

#Remarks

Use the switchToDesigner method to switch the Web Dashboard to the Designer mode.

#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.

#visible Property

Specifies whether the Dashboard Panel is visible.

#Declaration

TypeScript
visible: ko.Observable<boolean>

#Property Value

Type Description
Observable<boolean>

true, to display the Dashboard Panel; otherwise, false.

#Methods

#start Method

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

#Declaration

TypeScript
start(): void

#Remarks

See start to learn more.

#stop Method

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

#Declaration

TypeScript
stop(): void

#Remarks

See stop to learn more.

#updateDashboardsList Method

Updates the dashboard list based on the dashboards available in the dashboard storage.

#Declaration

TypeScript
updateDashboardsList(): void

#Remarks

You can obtain the list of available dashboards using the availableDashboards property.