DashboardPanelExtension Class

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

Declaration

export class DashboardPanelExtension implements IExtension

Remarks

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

// 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

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

Parameters

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

allowSwitchToDesigner: ko.Observable<boolean>

Property Value

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

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

Property Value

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

designerToViewerAction: DevExpress.Dashboard.SequenceAction

Property Value

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

|

hidePanelAsync Property

Hides the Dashboard Panel asynchronously.

Declaration

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

Property Value

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.

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

name: string

Property Value

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

panelWidth: number

Property Value

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

|

selectedItemKeys Property

Declaration

selectedItemKeys: ko.ObservableArray<string>

Property Value

showPanelAsync Property

Invokes the Dashboard Panel asynchronously.

Declaration

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

Property Value

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.

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

switchToDesigner: () => void

Property Value

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

switchToViewer: () => void

Property Value

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

viewerToDesignerAction: DevExpress.Dashboard.SequenceAction

Property Value

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

|

visible Property

Specifies whether the Dashboard Panel is visible.

Declaration

visible: ko.Observable<boolean>

Property Value

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

|

Methods

start Method

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

Declaration

start(): void

Remarks

See start to learn more.

stop Method

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

Declaration

stop(): void

Remarks

See stop to learn more.

updateDashboardsList Method

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

Declaration

updateDashboardsList(): void

Remarks

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