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 enable the Dashboard Panel, register the DashboardPanelExtension extension:
dashboardControl.registerExtension(new DevExpress.Dashboard.DashboardPanelExtension(dashboardControl));
You can see preview the dashboard panel in the DevExpress Web Dashboard Demo.
Implements
constructor(dashboardControl)
Initializes a new instance of the DashboardPanelExtension
class.
Declaration
constructor(
dashboardControl: 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
allowSwitchToDesigner: KnockoutObservable<boolean>
Property Value
Type | Description |
---|---|
KnockoutObservable<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
availableDashboards: KnockoutObservableArray<DashboardInfo>
Property Value
Type | Description |
---|---|
KnockoutObservableArray<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
Declaration
designerToViewerAction: SequenceAction
Property Value
Type |
---|
SequenceAction |
hidePanelAsync Property
Hides the Dashboard Panel asynchronously.
Declaration
hidePanelAsync: (options: WorkingModeSwitchingOptions) => JQuery.Promise<any, any, any>
Property Value
Type | Description |
---|---|
(options: WorkingModeSwitchingOptions) => JQuery.Promise<any,any,any> | 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() {
var dashboardPanelExtension = dashboardControl.findExtension('dashboard-panel');
dashboardPanelExtension.hidePanelAsync({}).done(function (e) {
dashboardControl.surfaceLeft(e.surfaceLeft);
});
}
name Property
Specifies a unique extension name.
Declaration
name: string
Property Value
Type | Description |
---|---|
string | A unique extension name. The return value is ‘dashboard-panel’. |
Remarks
Warning
Do not change a unique name of the extension registered in the Web Dashboard in order 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: KnockoutObservableArray<string>
Property Value
Type |
---|
KnockoutObservableArray<string> |
showPanelAsync Property
Invokes the Dashboard Panel asynchronously.
Declaration
showPanelAsync: (options: WorkingModeSwitchingOptions) => JQuery.Promise<any, any, any>
Property Value
Type | Description |
---|---|
(options: WorkingModeSwitchingOptions) => JQuery.Promise<any,any,any> | 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() {
var dashboardPanelExtension = dashboardControl.findExtension('dashboard-panel');
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 |
---|
() => void |
Remarks
Use the switchToViewer method to switch the Web Dashboard to the Viewer mode.
switchToViewer Property
Switches the Web Dashboard to the Viewer mode.
Declaration
switchToViewer: () => void
Property Value
Type |
---|
() => void |
Remarks
Use the switchToDesigner method to switch the Web Dashboard to the Designer mode.
viewerToDesignerAction Property
Declaration
viewerToDesignerAction: SequenceAction
Property Value
Type |
---|
SequenceAction |
visible Property
Specifies whether the Dashboard Panel is visible.
Declaration
visible: KnockoutObservable<boolean>
Property Value
Type | Description |
---|---|
KnockoutObservable<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.