DashboardControlOptions Interface

Provides options for configuring the DashboardControl.

Declaration

interface DashboardControlOptions

You can configure the DashboardControl's options when calling constructor. The code snippet below shows how to specify several options when creating the DashboardControl:

var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
    endpoint: "/api/dashboard",
    workingMode: "ViewerOnly",
    initialDashboardId: "dashboard1"
});

Refer to DashboardControl to see an HTML page example containing the DashboardControl.

Properties

ajaxRemoteService Property

Declaration

ajaxRemoteService?: AjaxRemoteServiceOptions

Property Value

Type Description
AjaxRemoteServiceOptions

allowMaximizeItems Property

Specifies whether end users can maximize dashboard items.

Declaration

allowMaximizeItems?: boolean

Property Value

Type Description
boolean

true, to allow maximizing dashboard items; otherwise, false.

encodeHtml Property

Specifies whether the DashboardControl's value and element content are rendered as pure HTML, or HTML markers are stripped out.

Declaration

encodeHtml?: boolean

Property Value

Type Description
boolean

true if the HTML code contained within the DashboardControl's value and element content are not executed and are converted into the corresponding text for display purposes; false if the web control's value and element content can contain pure HTML code.

endpoint Property

Specifies the endpoint URL prefix used by the DashboardControl to send data requests to a server.

Declaration

endpoint?: string

Property Value

Type Description
string

A string value that specifies the endpoint URL prefix used to send data requests to a server.

To learn how to perform server-side configuration to allow the DashboardControl to interact with a backend, see the following topics:

extensions Property

Specifies the registered extension settings.

Declaration

extensions?: ExtensionOptions | false

Property Value

Type Description
false
false

Property Value

Type Description
false
false

initialDashboardId Property

Specifies the identifier of the dashboard to be loaded to the DashboardControl.

Declaration

initialDashboardId?: string

Property Value

Type Description
string

A string value that specifies the dashboard identifier.

Use the initialDashboardId option to load a dashboard with the specified identifier from the dashboard storage. The code snippet below shows how to load a dashboard with the dashboard1 identifier:

var dashboardControl = new DevExpress.Dashboard.DashboardControl(document.getElementById("web-dashboard"), {
    endpoint: "/api/dashboard",
    initialDashboardId: "dashboard1"
});

initialDashboardState Property

Specifies the initial state of the loaded dashboard.

Declaration

initialDashboardState?: string

Property Value

Type Description
string

A string value that specifies the dashboard state.

Use the initialDashboardId option to set the identifier of the dashboard to which the state is applied.

To specify the initial dashboard state, initialize the DashboardState object on a server, save this object to JSON using the DashboardState.SaveToJson extension method and assign the resulting string to initialDashboardState.

limitVisibleDataMode Property

Specifies a data limitation mode that allows you to display a reduced form of visible data.

Declaration

limitVisibleDataMode?: LimitVisibleDataMode

Property Value

Type Description
LimitVisibleDataMode

A LimitVisibleDataMode value that is the data limitation mode.

Data reduction is used to accelerate the rendering of visual elements and to improve the Web Dashboard performance. First, the Web Dashboard control obtains the underlying data and performs all required calculations. After that, if the Web Dashboard needs a lot of time to render the content, visible data will be limited.

loadDefaultDashboard Property

Specifies whether or not the default dashboard should be loaded from the dashboard storage.

Declaration

loadDefaultDashboard?: boolean

Property Value

Type Description
boolean

true, to load the default dashboard from the dashboard storage; otherwise, false.

Note that the loadDefaultDashboard property is in effect if initialDashboardId is not specified. Otherwise, the dashboard with the specified identifier will be loaded.

onDashboardBeginUpdate Property

A handler for the event occurring when a dashboard update is initiated.

Declaration

onDashboardBeginUpdate?: (args: DashboardUpdateArgs) => void

Property Value

Type Description
(args: DashboardUpdateArgs) => void

A custom function that is executed when a dashboard update is initiated.

onDashboardEndUpdate Property

A handler for the event occurring after the dashboard update is performed.

Declaration

onDashboardEndUpdate?: (args: DashboardUpdateArgs) => void

Property Value

Type Description
(args: DashboardUpdateArgs) => void

A custom function that is executed after the dashboard update is performed.

onDashboardInitialized Property

A handler for the event occurring after the dashboard displayed in the control has been initialized.

Declaration

onDashboardInitialized?: (args: DashboardInitializedArgs) => void

Property Value

Type Description
(args: DashboardInitializedArgs) => void

A custom function that is executed after the dashboard displayed in the control has been initialized.

onDashboardInitializing Property

A handler for the event occurring before the dashboard displayed in the control has been initialized.

Declaration

onDashboardInitializing?: (args: DashboardInitializingArgs) => void

Property Value

Type Description
(args: DashboardInitializingArgs) => void

A custom function that is executed before the dashboard displayed in the control has been initialized.

onDashboardStateChanged Property

A handler for the event occurring after the state of the dashboard displayed in the Web Dashboard is changed.

Declaration

onDashboardStateChanged?: (args: DashboardStateChangedArgs) => void

Property Value

Type Description
(args: DashboardStateChangedArgs) => void

A custom function that is executed after the state of the dashboard displayed in the Web Dashboard is changed.

onInitializing Property

A handler for the event occurring after the control has been initialized and before the control has been rendered.

Declaration

onInitializing?: (args: {
    component: DashboardControl;
}) => void

Property Value

Type Description
(args: {component: DashboardControl}) => void

A custom function that is executed after the control has been initialized and before the control has been rendered.

onItemBeginUpdate Property

A handler for the event occurring when a dashboard item update is initiated.

Declaration

onItemBeginUpdate?: (args: DashboardItemUpdateArgs) => void

Property Value

Type Description
(args: DashboardItemUpdateArgs) => void

A custom function that is executed when a dashboard item update is initiated.

onItemEndUpdate Property

A handler for the event occurring after the dashboard item update is performed.

Declaration

onItemEndUpdate?: (args: DashboardItemUpdateArgs) => void

Property Value

Type Description
(args: DashboardItemUpdateArgs) => void

A custom function that is executed after the dashboard item update is performed.

resizeByTimer Property

Specifies whether to redraw the DashboardControl automatically when the size of a container changes.

Declaration

resizeByTimer?: boolean

Property Value

Type Description
boolean

true, to redraw the DashboardControl automatically when the size of the a container changes; otherwise, false.

By default, the DashboardControl redraws itself automatically when the size of its parent container changes. You can set the resizeByTimer property to false to disable automatic redrawing. In this case, call the repaint method to redraw the DashboardControl.

showConfirmationOnBrowserClosing Property

Specifies whether to show a browser warning if an end-user attempts to leave the page with unsaved data.

Declaration

showConfirmationOnBrowserClosing?: boolean

Property Value

Type Description
boolean

true, to show dialog; otherwise, false.

useCardLegacyLayout Property

Specifies whether to enable the legacy card layout used prior to v17.1.

Declaration

useCardLegacyLayout?: boolean

Property Value

Type Description
boolean

true, to enable the legacy card layout used prior to v17.1; otherwise, false.

With v17.1 and later, the Card dashboard item allows you to arrange elements within individual cards using different layout types (Stretched, Compact, etc.). By default, the Card dashboard item uses the Stretched layout type that arranges card elements so that they occupy an entire card area.

The useCardLegacyLayout property allows you to create cards in a legacy layout using the Designer mode of the Web Dashboard.

Note

Note that if you load a dashboard XML file created before v17.1, cards will be displayed in the old layout. To display such cards using the new layout, specify the required layout type in the UI or in code.

useNeutralFilterMode Property

Declaration

useNeutralFilterMode?: boolean

Property Value

Type Description
boolean

workingMode Property

Specifies the Web Dashboard control's working mode.

Declaration

workingMode?: WorkingMode

Property Value

Type Description
WorkingMode

A value that specifies the Web Dashboard control's working mode.