WebDocumentViewerClientSideEventsBuilderBase<TBuilder, TEvents>.ParametersInitialized(String) Method

Specifies the JavaScript function that handles the client-side ParametersInitialized event and allows you to get the client-side parameter values when they are initialized and modify them.

Namespace : DevExpress.AspNetCore.Reporting.WebDocumentViewer

Assembly : DevExpress.AspNetCore.Reporting.v25.2.dll

NuGet Package : DevExpress.AspNetCore.Reporting

csharp

public TBuilder ParametersInitialized(
    string callback
)

Public Function ParametersInitialized(
    callback As String
) As TBuilder

Parameters

Name	Type	Description
callback	String

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

Returns

Type	Description
TBuilder

The WebDocumentViewerClientSideEventsBuilderBase<TBuilder, TEvents> object that can be used for method chaining.

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
lookupValues
value

SubmitA method that initiates document generation.ShouldRequestParametersReturns 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.

javascript

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

For the ASP.NET Core MVC Document Viewer, pass false to the AutoStartBuild(Boolean) method to disable automatic report generation and avoid generating a report twice.

Example: Cascading Parameters

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

javascript

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();
}

For the ASP.NET Core MVC Document Viewer, pass false to the AutoStartBuild(Boolean) method to disable automatic report generation and avoid generating a report twice.

Example: Multi-value Parameters

Multi-value parameters use a specific model for value storage. Assign values as follows:

report-viewer.html
report-viewer.ts

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>

typescript

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.