DxDocumentViewerCallbacks.ParametersInitialized Property

Specifies the JavaScript function that handles the client-side ParametersInitialized event and allows you to modify client-side parameter values after initialization before they are displayed.

Namespace: DevExpress.Blazor.Reporting

Assembly: DevExpress.Blazor.Reporting.v23.2.JSBasedControls.Common.dll

NuGet Package: DevExpress.Blazor.Reporting.JSBasedControls.Common

Declaration

C#

[Parameter]
public string ParametersInitialized { get; set; }

VB.NET

<Parameter>
Public Property ParametersInitialized As String

Property Value

Type	Description
String	The name of a JavaScript function or entire JavaScript function code that runs when the ParametersInitialized event occurs.

Remarks

The ParametersInitialized event allows you to get client-side parameter values when they are initialized, subscribe to their changes, and fill parameter editors with custom parameter values.

The handler function receives two arguments - the first argument is the client-side DocumentViewer object (Preview if the ReportDesigner event is handled); the second argument is the object with the following properties and methods:

ActualParametersInfo

An array of objects with information about parameters. Each object contains the following properties and methods:

• parameterDescriptor - an object with the IParameterDescriptor interface. It contains a parameter description and indicates whether a parameter has lookup values.
• lookupValues - returns a ko.ObservableArray<IDisplayedValue> array of the parameter lookup values {value, displayValue}.
• value - returns the ko.Observable | ko.Computed parameter value. You can subscribe to this value to handle user action when the user changes the parameter value in the editor.

Submit

A method that initiates document generation.

ShouldRequestParameters

Returns true if the report’s RequestParameters property is true and the report has at least one visible parameter. Otherwise, the property returns false.

Example - Initialize an Invisible Parameter

You can use the ParametersInitialized event to set the value of the report parameter that is not displayed in the Preview Parameters panel. The following code snippet sets the parameter value after the Viewer loads the report, but before the Viewer creates and displays the document. This code calls the Submit method to generate the document after the specified parameter value is applied to the report.

function onParametersInitialized(s, e) {
    var p1 = e.ActualParametersInfo
        .filter(x => x.parameterDescriptor.name == "parameter1")[0];
    p1.value = 100;
    p1 && e.Submit();
}

Example - Cascading Parameters

The following code snippet filters lookup values of the Person2 parameter based on the value selected for the Person1 parameter:

function ParametersInitialized(sender, args) {
    var parameter1 = args.ActualParametersInfo.filter(
        x => x.parameterDescriptor.name == 'Person1')[0];
    var parameter2 = args.ActualParametersInfo.filter(
        x => x.parameterDescriptor.name == 'Person2')[0];
    var preValue = null;
    parameter1.events.on('propertyChanged', (args) => {
        if(args.propertyName === 'value') {
            const newVal = args.newValue;
            var lookUps = parameter2.lookUpValues.filter(
                x => x.value != newVal);
            preValue && lookUps.push(preValue);
            preValue = parameter2.lookUpValues.filter(
                x => x.value == newVal)[0];
            parameter2.lookUpValues = lookUps;
        }
    });
    parameter1 && parameter2 && args.Submit();
}

Example - MultiValue Parameters

Multi-value parameters use a special model for value storage, so you must assign values in the following way:

Angular

  report-viewer.html

<dx-report-viewer [reportUrl]="reportUrl" height="calc(100vh - 90px)" developmentMode="true">
    <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
    <dxrv-progressbar-settings position="BottomLeft"></dxrv-progressbar-settings>
    <dxrv-callbacks (ParametersInitialized)="ParametersInitialized($event)">
    </dxrv-callbacks>
</dx-report-viewer>

 

report-viewer.ts

import { Component, Inject, ViewEncapsulation, ViewChild } from '@angular/core';
import { DxReportViewerComponent } from 'devexpress-reporting-angular';


@Component({
    selector: 'report-viewer',
    encapsulation: ViewEncapsulation.None,
    templateUrl: './report-viewer.html',
    styleUrls: [
        "../../../node_modules/devextreme/dist/css/dx.light.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.common.css",
        "../../../node_modules/@devexpress/analytics-core/dist/css/dx-analytics.light.css",
        "../../../node_modules/devexpress-reporting/dist/css/dx-webdocumentviewer.css"
    ]
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "XtraReport1";
    invokeAction: string = '/DXXRDV';

    ParametersInitialized(event) {
        var parameter = event.args.ActualParametersInfo.filter(x => x.parameterDescriptor.name == "testParameter")[0];
        var newValuesArray: string[] = new Array<string>(`1`, `2`, `3`);
        parameter.value = newValuesArray;
    }
    constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

Use an inner value property for value assignment. Even if a parameter uses a numeric data type, the value should be assigned as a string array.