Skip to main content

DashboardParameterDialogExtension Class

A Web Dashboard extension that is the Dashboard Parameters dialog.

#Declaration

TypeScript
export class DashboardParameterDialogExtension extends DisposableObject implements ISupportOptionExtension<DashboardParameterDialogExtensionOptions>

#Remarks

To configure the extension, refer to the DashboardParameterDialogExtensionOptions class that contains the Dashboard Parameter Dialog’s options.

See the following topic for information on how to use the DashboardControl’s client-side API: Extensions Overview.

#Implements

ISupportOptionExtension

#Inherited Members

#Inheritance

DisposableObject
DashboardParameterDialogExtension

#constructor(dashboardControl)

Initializes a new instance of the DashboardParameterDialogExtension class.

#Declaration

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

#Parameters

Name Type Description
dashboardControl DashboardControl

A Web Dashboard control that owns the extension.

options DashboardParameterDialogExtensionOptions

A DashboardParameterDialogExtensionOptions object that contains the extension options.

#Properties

#name Property

Specifies the unique extension name.

#Declaration

TypeScript
name: string

#Property Value

Type Description
string

The unique extension name. The return value is dashboardParameterDialog.

#Remarks

Use the dashboardParameterDialog name in the following cases:

  • Call the DashboardControl.findExtension method and pass the extension name as a parameter to access the extension.
  • Call the control’s option method to change the extension options.

Warning

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

#off Property

Unsubscribes from DashboardParameterDialogExtension events.

#Declaration

TypeScript
off: DevExpress.Dashboard.Internal.EventSubscriber<DashboardParameterDialogExtensionEvents>

#Property Value

Type Description
EventSubscriber<DashboardParameterDialogExtensionEvents>

An event subscription.

#Remarks

The extension’s on and off methods help you subscribe to and unsubscribe from events.

#on Property

Subscribes to DashboardParameterDialogExtension events.

#Declaration

TypeScript
on: DevExpress.Dashboard.Internal.EventSubscriber<DashboardParameterDialogExtensionEvents>

#Property Value

Type Description
EventSubscriber<DashboardParameterDialogExtensionEvents>

An event subscription.

#Remarks

The extension’s on and off methods help you subscribe to and unsubscribe from events.

#onHidden Property

A handler for the event that occurs when the Dashboard Parameter dialog is hidden.

#Declaration

TypeScript
get onHidden(): ((e: DashboardParameterDialogArgs) => any)
set onHidden(value: ((e: DashboardParameterDialogArgs) => any))

#Property Value

Type Description
(e: DashboardParameterDialogArgs) => any

A function that is executed when the Dashboard Parameter dialog is hidden.

#onShowing Property

A handler for the event that occurs before the Dashboard Parameter dialog is shown.

#Declaration

TypeScript
get onShowing(): ((e: DashboardParameterDialogArgs) => any)
set onShowing(value: ((e: DashboardParameterDialogArgs) => any))

#Property Value

Type Description
(e: DashboardParameterDialogArgs) => any

A function that is executed before the Dashboard Parameter dialog is shown.

#onShown Property

A handler for the event that occurs after the Dashboard Parameter dialog is shown.

#Declaration

TypeScript
get onShown(): ((e: DashboardParameterDialogArgs) => any)
set onShown(value: ((e: DashboardParameterDialogArgs) => any))

#Property Value

Type Description
(e: DashboardParameterDialogArgs) => any

A function that is executed after the Dashboard Parameter dialog is shown.

#showDialogButton Property

Specifies whether the Parameter button is shown in the dashboard title.

#Declaration

TypeScript
showDialogButton: ko.Observable<boolean>

#Property Value

Type Description
Observable<boolean>

true, to show the Parameter button in the dashboard title; otherwise, false.

#Remarks

You can change the values of the dashboard parameters in the Dashboard Parameters dialog. To open the dialog, click the Parameters button in the dashboard title.

You can hide the Parameters button. To do this, pass false to the showDialogButton property:

js
// The dashboardControl variable is the obtained DashboardControl instance.
var parameterDialogExt = dashboardControl.findExtension('dashboardParameterDialog');
parameterDialogExt.showDialogButton(false);

For more information on how to change the dashboard parameter values in the UI and in code, refer to the following article: Specify Dashboard Parameter Values.

See Also

#Methods

#getParameters Method

Returns dashboard parameter settings and metadata.

#Declaration

TypeScript
getParameters(): DevExpress.Dashboard.DashboardParameterCollection

#Returns

Type Description
DashboardParameterCollection

A DashboardParameterCollection object that contains parameter settings and metadata.

#Example

This example shows how to change dashboard parameter values on the client.

The example uses the following methods:

DashboardParameterDialogExtension.getParameters
Returns dashboard parameter settings and metadata.
DashboardParameter.setValue
Specifies the current parameter value(s).
DashboardParameter.getDefaultValue
Returns a default parameter value.
DashboardParameterDialogExtension.show
Invokes the Dashboard Parameters dialog.

View Example

function onBeforeRender(s) {
    var dashboardControl = s.GetDashboardControl();
    if (dashboardControl) {
        dashboardControl.on('dashboardEndUpdate', function () { setParameterValues(dashboardControl); })
    }
}

function setParameterValues(control) {
    var parameterDialogExt = control.findExtension('dashboardParameterDialog');
    $("#setParameterValuesButton").dxButton({
        text: 'Specify Parameter Values',
        onClick: function () {
            var parameters = parameterDialogExt.getParameters();
            var paramCategory = parameters.getParameterByName("categoryParameter"),
                paramStartDate = parameters.getParameterByName("startDateParameter");
            paramCategory.setValue("Condiments");
            paramStartDate.setValue(new Date(2015, 3, 1));
        }
    });
    $("#resetParameterValuesButton").dxButton({
        text: 'Reset Parameter Values',
        onClick: function () {
            var parameters = parameterDialogExt.getParameters();
            var paramCategory = parameters.getParameterByName("categoryParameter"),
                paramStartDate = parameters.getParameterByName("startDateParameter");
            paramCategory.setValue(paramCategory.getDefaultValue());
            paramStartDate.setValue(paramStartDate.getDefaultValue());
        }
    });
    $("#showParametersDialog").dxButton({
        text: 'Show Parameters Dialog',
        onClick: function () {
            parameterDialogExt.show();
        }
    });
}
See Also

#hide Method

Closes the Dashboard Parameters dialog.

#Declaration

TypeScript
hide(): void

#renderContent(element) Method

Renders the content of the Dashboard Parameter dialog inside the specified DOM element.

#Declaration

TypeScript
renderContent(
    element: JQuery | Element
): DevExpress.Dashboard.ParameterDialogContent

#Parameters

Name Type Description
element Element | JQuery<HTMLElement>

A DOM element where the content of the Dashboard Parameter dialog is rendered.

#Returns

Type Description
ParameterDialogContent

A content of the Dashboard Parameter dialog.

#show Method

Invokes the Dashboard Parameters dialog.

#Declaration

TypeScript
show(): void

#Example

This example shows how to change dashboard parameter values on the client.

The example uses the following methods:

DashboardParameterDialogExtension.getParameters
Returns dashboard parameter settings and metadata.
DashboardParameter.setValue
Specifies the current parameter value(s).
DashboardParameter.getDefaultValue
Returns a default parameter value.
DashboardParameterDialogExtension.show
Invokes the Dashboard Parameters dialog.

View Example

function onBeforeRender(s) {
    var dashboardControl = s.GetDashboardControl();
    if (dashboardControl) {
        dashboardControl.on('dashboardEndUpdate', function () { setParameterValues(dashboardControl); })
    }
}

function setParameterValues(control) {
    var parameterDialogExt = control.findExtension('dashboardParameterDialog');
    $("#setParameterValuesButton").dxButton({
        text: 'Specify Parameter Values',
        onClick: function () {
            var parameters = parameterDialogExt.getParameters();
            var paramCategory = parameters.getParameterByName("categoryParameter"),
                paramStartDate = parameters.getParameterByName("startDateParameter");
            paramCategory.setValue("Condiments");
            paramStartDate.setValue(new Date(2015, 3, 1));
        }
    });
    $("#resetParameterValuesButton").dxButton({
        text: 'Reset Parameter Values',
        onClick: function () {
            var parameters = parameterDialogExt.getParameters();
            var paramCategory = parameters.getParameterByName("categoryParameter"),
                paramStartDate = parameters.getParameterByName("startDateParameter");
            paramCategory.setValue(paramCategory.getDefaultValue());
            paramStartDate.setValue(paramStartDate.getDefaultValue());
        }
    });
    $("#showParametersDialog").dxButton({
        text: 'Show Parameters Dialog',
        onClick: function () {
            parameterDialogExt.show();
        }
    });
}
See Also

#start Method

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

#Declaration

TypeScript
start(): void

#stop Method

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

#Declaration

TypeScript
stop(): void

#subscribeToContentChanges(callback) Method

Allows you to handle any changes in the collection of dashboard parameters.

#Declaration

TypeScript
subscribeToContentChanges(
    callback: (newValue: DevExpress.Dashboard.DashboardParameterCollection) => void
): ko.Subscription

#Parameters

Name Type Description
callback (newValue: DashboardParameterCollection) => void

A function that is called on any changes in the collection of dashboard parameters.

#Returns

Type Description
ko.Subscription

A KnockoutSubscription object that allows you to terminate a subscription.

#Remarks

The subscribeToContentChanges method is used in the custom Parameter item.

The method allows you to subscribe to any changes in the collection of dashboard parameters:

See Also