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
#constructor(dashboardControl)
Initializes a new instance of the DashboardPanelExtension
class.
#Declaration
constructor(
dashboardControl: DevExpress.Dashboard.DashboardControl,
options?: DashboardPanelExtensionOptions
)
#Parameters
Name | Type | Description |
---|---|---|
dashboard |
Dashboard |
A Web Dashboard control that owns the extension. |
options | Dashboard |
A Dashboard |
#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
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 allow
#availableDashboards Property
Gets an array of dashboards displayed in the Dashboard Panel.
#Declaration
availableDashboards: ko.ObservableArray<DevExpress.Dashboard.DashboardInfo>
#Property Value
Type | Description |
---|---|
Observable |
An array of the Dashboard |
#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
Type | Description |
---|---|
Sequence |
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
Type | Description |
---|---|
(options: Working |
The Working |
#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
Type | Description |
---|---|
string | The unique extension name. The return value is ‘dashboard |
#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
Type | Description |
---|---|
number | An integer value that specifies the Dashboard Panel’s width (in pixels). |
#selectedItemKeys Property
#Declaration
selectedItemKeys: ko.ObservableArray<string>
#Property Value
Type |
---|
Observable |
#showPanelAsync Property
Invokes the Dashboard Panel asynchronously.
#Declaration
showPanelAsync: (options: DevExpress.Dashboard.WorkingModeSwitchingOptions) => JQueryPromise<{}>
#Property Value
Type | Description |
---|---|
(options: Working |
The Working |
#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
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
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
viewerToDesignerAction: DevExpress.Dashboard.SequenceAction
#Property Value
Type | Description |
---|---|
Sequence |
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
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
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.