WebDocumentViewerClientSideEvents.ParametersInitialized Property
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.XtraReports.Web
Assembly: DevExpress.XtraReports.v24.1.Web.WebForms.dll
NuGet Package: DevExpress.Web.Reporting
Declaration
Property Value
Type | Default | Description |
---|---|---|
String | String.Empty | 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:
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.