JSReportViewerBase<T> Class

Base class for a client object that provides access to the client-side Document Viewer API.

Declaration

export class JSReportViewerBase<T extends DevExpress.Reporting.Viewer.Internal.PreviewDisposableModelBase = DevExpress.Reporting.Viewer.Internal.PreviewDisposableModelBase> extends BaseModel

Type Parameters

Name	Type
T	PreviewDisposableModelBase

Remarks

To access the JSReportViewer object in applications based on different JS frameworks, use Knockout bindings as follows:

Angular	React	Vue
bindingSender property	the sender object in the event handler function used in callbacks binding	the sender object in the event handler function used in callbacks binding

For code examples, review the class member descriptions.

Inheritance

JSReportViewerBase<T>

JSReportParametersPanel

JSReportViewer

constructor<T>(_previewModel)

Initializes a new instance of the JSReportViewerBase<T> class with specified settings.

Declaration

constructor(
    _previewModel: ko.Observable<T>
)

Parameters

Name	Type
_previewModel	Observable<T>

Type Parameters

Name	Type
T	PreviewDisposableModelBase

Properties

previewModel Property

Declaration

previewModel: T

Property Value

Type
T

Methods

Close Method

Closes the document that is currently open in the Web Document Viewer.

Declaration

Close(): void

Remarks

The Close method closes the displayed document and leaves the Document Viewer empty. Call this method to release memory allocated on the server (storage and cache) when the user closes the page that contains the Document Viewer control.

The following code calls the Close method when a page (or UI region) window is about to close and unload its resources. The code uses jQuery API and handles the BeforeRender event.

JavaScript

function onBeforeRender(s, e) {
  $(window).on('beforeunload', function(e) {
    s.Close();
});

dispose Method

Declaration

dispose(): void

GetParametersModel Method

Allows you to access the report parameters client-side model.

Declaration

GetParametersModel(): DevExpress.Reporting.Viewer.Parameters.ParametersPanelModelBase

Returns

Type	Description
ParametersPanelModelBase	The report parameters client-side model.

Remarks

The GetParametersModel method returns the parameter model that allows you to modify report parameters on the client before the user submits them.

Note

The parameter model is available only for visible parameters (parameters with the Visible property set to true).

Example - Obtain Parameter Values for a Multi-Value Parameter

The following code obtains values that the user selects in the multi-value parameter editor:

Angular

 

report-viewer.html

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
    </dx-report-viewer>
</div>

 

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: [
   // ...
  ]
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "XtraReport1";
    invokeAction: string = '/DXXRDV';

    GetClientParameter() {
        var parametersModel = this.viewer.bindingSender.GetParametersModel();
        var selectedValuesArray = parametersModel['MyMultiSelectParameterName'].value; 
        var firstValue = selectedValuesArray[0];
    }

  constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

'use client';
import React from 'react';
import ReportViewer, { Callbacks, DxReportViewerRef, RequestOptions } from 'devexpress-reporting-react/dx-report-viewer';

function App() {
  const viewerRef = React.useRef<DxReportViewerRef>();
  const getClientParameter = () => {
    var parametersModel = viewerRef.current?.instance().GetParametersModel();
    var parameter5 = parametersModel?.parameters.filter(x => x.path == 'parameter5')[0];
    var multivalueParameter = parameter5?.value;
    var firstItem = multivalueParameter.items[0];
    console.log('Parameter1 first item: ', firstItem);
  }

  return (
    <>
      <button onClick={getClientParameter}>Show the first Parameter5 item in the console</button>
      <ReportViewer ref={viewerRef} reportUrl="TestExportReport">
        <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
      </ReportViewer>
    </>
  )
}

export default App

Vue

<template>
    <div>
        <div>{{ message }}</div>
        <div>
            <button @click="getClientParameter">Build Document</button>
        </div>
        <div
            ref="viewer"
            style="position: absolute; left: 0; right: 0"
            data-bind="dxReportViewer: $data"
        ></div>
    </div>
</template>

<script>
import ko from "knockout";
import "devexpress-reporting/dx-webdocumentviewer";
export default {
name: "WebDocumentViewer",
props:["message"],
data() {
    return {
        previewModel: ko.observable(),
    }
},
methods: {
    getClientParameter() {
        var parametersModel = this.previewModel().GetParametersModel();
        var selectedValuesArray = parametersModel['MyMultiSelectParameterName'].value; 
        var firstValue = selectedValuesArray[0];
        this.message = firstValue;
        }
},
mounted() {
    var viewerOptions = {
        reportUrl: ko.observable("Products"), // The report identifier.
        requestOptions: {
        host: "http://localhost:54114/", // Change the port number if necessary.
        // This line if you use an ASP.NET MVC backend
        invokeAction: "/WebDocumentViewer/Invoke",
        // This line if you use an ASP.NET Core backend
        //invokeAction: "DXXRDV" 
        },
        callbacks: {  
            DocumentReady: function(s, e) {
                s.GoToPage(e.PageCount - 1);
            }
        },
        viewerModel: this.previewModel        
    };
    ko.applyBindings(viewerOptions, this.$refs.viewer);
},
beforeUnmount() {
    ko.cleanNode(this.$refs.viewer);
}
};
</script>

View Example: Reporting for React - Customize a Web Document Viewer in a React App (Next.js)

Example: Pass Parameter to the Report

The following code creates a button that passes a parameter to the report and rebuilds the document. When the document is created, the Document Viewer navigates to the last page:

Angular

 

report-viewer.html

<div>
    <button (click)="BuildOnClick()"><span>Build Document</span></button>
</div>

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (DocumentReady)="GoToLastPage($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

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: [
   // ...
  ]
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "XtraReport1";
    invokeAction: string = '/DXXRDV';

    BuildOnClick() {
        var parameterValue = 1;
        this.viewer.bindingSender.GetParametersModel()["parameter1"](parameterValue);
        this.viewer.bindingSender.StartBuild();
    }
    GoToLastPage(event) {
        this.viewer.bindingSender.GoToPage(event.args.PageCount - 1);
    }

  constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

'use client';
import React from 'react';
import ReportViewer, { Callbacks, DxReportViewerRef, RequestOptions } from 'devexpress-reporting-react/dx-report-viewer';

function App() {
  const viewerRef = React.useRef<DxReportViewerRef>();
  const onDocumentReady = (event: any): void => {
    event.sender.GoToPage(event.args.PageCount - 1);
  };
  const buildDocument = () => {
    var parameterValue = "2";
    if (viewerRef.current) {
      viewerRef.current.instance().GetParametersModel().parameters[0].value = parameterValue;
      viewerRef.current.instance().previewModel.StartBuild();
    }
  }

  return (
    <>
      <button onClick={buildDocument}>Build Document</button>
      <ReportViewer ref={viewerRef} reportUrl="TestExportReport">
        <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
        <Callbacks DocumentReady={onDocumentReady} />
      </ReportViewer>
    </>
  )
}

export default App

Vue

<template>
    <div>
        <div>
            <button @click="buildDocument">Build Document</button>
        </div>
        <div
            ref="viewer"
            style="position: absolute; left: 0; right: 0"
            data-bind="dxReportViewer: $data"
        ></div>
    </div>
</template>

<script>
import ko from "knockout";
import "devexpress-reporting/dx-webdocumentviewer";
export default {
name: "WebDocumentViewer",
data() {
    return {
        previewModel: ko.observable(),
    }
},
methods: {
    buildDocument() {
        var parameterValue = 1;
        this.previewModel().GetParametersModel()["param1"](parameterValue);
        this.previewModel().StartBuild();
    }
},
mounted() {
    var viewerOptions = {
        reportUrl: ko.observable("Products"), // The report identifier.
        requestOptions: {
        host: "http://localhost:54114/", // Change the port number if necessary.
        // This line if you use an ASP.NET MVC backend
        invokeAction: "/WebDocumentViewer/Invoke",
        // This line if you use an ASP.NET Core backend
        //invokeAction: "DXXRDV" 
        },
        callbacks: {  
            DocumentReady: function(s, e) {
                s.GoToPage(e.PageCount - 1);
            }
        },
        viewerModel: this.previewModel        
    };
    ko.applyBindings(viewerOptions, this.$refs.viewer);
},
beforeUnmount() {
    ko.cleanNode(this.$refs.viewer);
}
};
</script>

GetPreviewModel Method

Provides access to the Document Viewer’s client-side model.

Declaration

GetPreviewModel(): T

Returns

Type	Description
T	An object that is the client-side preview model.

Remarks

Call the GetPreviewModel method to obtain the Document Viewer’s client-side model and adjust settings for the Document Viewer UI and the current document.

The following code snippet collapses the Parameters panel after the user resets parameter values.

ASP.NET Core

<script type="text/javascript" id="script" >
    function onParametersReset(s, e) {
        var preview = s.GetPreviewModel();
        if (preview) {
            preview.tabPanel.collapsed = true;
        }
    }
</script>

@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .Height("1000px")
        .ClientSideEvents(configure => configure.ParametersReset("onParametersReset"))
        .Bind("TestReport");
    @viewerRender.RenderHtml()

Angular

  report-viewer.html

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (ParametersReset)="onParametersReset($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

report-viewer.ts

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

@Component({
    selector: 'report-viewer',
    encapsulation: ViewEncapsulation.None,
//...
})
export class ReportViewerComponent {
    @ViewChild(DxReportViewerComponent, { static: false }) viewer: DxReportViewerComponent;
    reportUrl: string = "TestReport";
    invokeAction: string = '/DXXRDV';

    onParametersReset(event) {
        var self = this;
        var preview = self.viewer.bindingSender.GetPreviewModel();
        if (preview) {
            preview.tabPanel.collapsed = true;
        }

    constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

'use client';
import ReportViewer, { Callbacks, RequestOptions } from 'devexpress-reporting-react/dx-report-viewer';

function App() {
  const onParametersReset = ({ sender }: { sender: any }) => {
    var preview = sender.GetPreviewModel();
    if (preview) {
      preview.tabPanel.collapsed = true;
    }
  };
  return (
    <ReportViewer reportUrl="TestExportReport">
      <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
      <Callbacks ParametersReset={onParametersReset} />
    </ReportViewer>
  )
}

export default App

Vue

<template>
<div>
    <div ref="viewer" style="position: absolute; left: 0; right: 0" data-bind="dxReportViewer: $data">
    </div>
</div>
</template>

<script>
import ko from "knockout";
import 'devexpress-reporting/dx-webdocumentviewer';


export default {
name: "WebDocumentViewer",
data() {
    return {
        previewModel: ko.observable(),
    }
},
    mounted() {
        var reportUrl = ko.observable("TestReport");
        var requestOptions = {
                // Specify the backend application URL.
                host: "https://localhost:44370/",
                // Use this line if you use an ASP.NET MVC backend
                //invokeAction: "/WebDocumentViewer/Invoke",
                // Use this line if you use an ASP.NET Core backend
                invokeAction: "DXXRDV"
            };
        var    callbacks = {  
            ParametersReset(s, e) {
                var preview = s.GetPreviewModel();
                if (preview) {
                    preview.tabPanel.collapsed = true;
                }
            }
        };    
        ko.applyBindings({
            reportUrl: reportUrl,
            viewerModel: this.previewModel,
            requestOptions: requestOptions,
            callbacks: callbacks
        }, this.$refs.viewer);
    },
beforeUnmount() {
    ko.cleanNode(this.$refs.viewer);
}
};

</script>

View Example: Reporting for React - Customize a Web Document Viewer in a React App (Next.js)

onPropertyChanged(args) Method

Declaration

onPropertyChanged(
    args: DevExpress.Analytics.Serializer.Native.PropertyChangedEventArgs<any> | DevExpress.Analytics.Serializer.Native.ArrayPropertyChangedEventArgs<any>
): void

Parameters

Name	Type
args	PropertyChangedEventArgs<any> | ArrayPropertyChangedEventArgs<any>

OpenReport(reportName) Method

Opens the specified report on the Web Document Viewer’s client side. Allows you to refresh preview for the loaded report.

Declaration

OpenReport(
    reportName: any
): PromiseLike<DevExpress.Reporting.Viewer.Utils.IPreviewInitialize>

Parameters

Name	Type	Description
reportName	any	A string that specifies the report’s URL.

Returns

Type
PromiseLike<IPreviewInitialize>

Remarks

The client-side OpenReport method uses the report name resolution services to translate a report name to a report instance. For more information review the following help topic: Open a Report in ASP.NET Core Application.

Tip

You can call the OpenReport method with the current report name passed as the parameter to update the displayed report.

The following code creates a button that loads the “XtraReport1” report:

Angular

 

report-viewer.html

<div>  
  <button (click)="openReport()"><span>Open Report</span></button>  
</div> 

 <div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl"></dxrv-request-options>
    </dx-report-viewer>
</div>

 

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 = "TestReport";
    invokeAction: string = '/DXXRDV';

    openReport() {
        var t = this.viewer.bindingSender.OpenReport("XtraReport1");
    }

  constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

'use client';
import React from 'react'
import ReportViewer, { RequestOptions, DxReportViewerRef } from 'devexpress-reporting-react/dx-report-viewer';

function App() {
  const viewerRef = React.useRef<DxReportViewerRef>();
  const onClick = () => viewerRef.current?.instance().OpenReport("TestExportReport");

  return (
    <>
      <button onClick={onClick}> Open Report </button>
      <ReportViewer ref={viewerRef} reportUrl="TestReport">
        <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
      </ReportViewer>
    </>
  )
}

export default App

Vue

<template>
<div>
    <div>
        <button @click='openReport'>Open Report</button>
    </div>
    <div ref="viewer" style="position: absolute; left: 0; right: 0" data-bind="dxReportViewer: $data">
    </div>
</div>
</template>

<script>
import ko from "knockout";
var componentData = {
    name: "WebDocumentViewer",
    data() {
        return {
            previewModel: ko.observable(),
        }
    },
    methods: {
        openReport() {
            this.previewModel().OpenReport("XtraReport1");
        },
    },
    mounted() {
        var reportUrl = ko.observable("TestReport"); // The URL of a report.
        var requestOptions = {
        // Specify the server-side application port.
                host: "https://localhost:52454/",
                // Use this line for an ASP.NET MVC backend
                //invokeAction: "/WebDocumentViewer/Invoke",
                // Use this line for an ASP.NET Core backend
                invokeAction: "DXXRDV"
            };  
        ko.applyBindings({
            reportUrl: reportUrl,
            viewerModel: this.previewModel,
            requestOptions: requestOptions,
        }, this.$refs.viewer);
    },
    beforeUnmount() {
        ko.cleanNode(this.$refs.viewer);
    }
};
export default componentData;
</script>

View Example: Reporting for React - Customize a Web Document Viewer in a React App (Next.js)

previewExists Method

Declaration

previewExists(): DevExpress.Reporting.Viewer.ReportHolder

Returns

Type
ReportHolder

ResetParameters Method

Resets the report parameter values to the default values.

Declaration

ResetParameters(): void

Remarks

The method restores the default report parameter values and raises the ParametersReset event.

The following code creates a button that resets the report parameters. The ParametersReset event handler displays the parameter name and value.

Angular

 

report-viewer.html

<div>
    <button (click)="btnOnClick()"><span>TEST</span></button>
</div>

<div>
    <dx-report-viewer [reportUrl]="reportUrl" height="800px">
        <dxrv-request-options [invokeAction]="invokeAction" [host]="hostUrl">
        </dxrv-request-options>
        <dxrv-callbacks (ParametersReset)="onParametersReset($event)">
        </dxrv-callbacks>
    </dx-report-viewer>
</div>

 

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 = "TestReport";
    invokeAction: string = '/DXXRDV';

    btnOnClick() {
        this.viewer.bindingSender.ResetParameters();
    }
    onParametersReset(event) {
        alert("Parameter " + event.args.Parameters[0].path + " is reset to " + event.args.Parameters[0].value);
    }

  constructor(@Inject('BASE_URL') public hostUrl: string) { }
}

React

'use client';
import React from 'react'
import ReportViewer, { RequestOptions, Callbacks, DxReportViewerRef } from 'devexpress-reporting-react/dx-report-viewer';

function App() {
  const viewerRef = React.useRef<DxReportViewerRef>();
  const onClick = () => viewerRef.current?.instance().ResetParameters();
  const onParametersReset = ({ args }: { args: any }) => {
    console.log("ParametersReset");
    console.log("Parameter " + args.Parameters[0].path + " is reset to " + args.Parameters[0].value);
  };
  const onParametersSubmitted = ({ args }: { args: any }) => {
    console.log("ParametersSubmitted");
    args.Parameters.forEach((parameter: any) => {
      console.log("Parameter " + parameter.Key + " value " + JSON.stringify(parameter.Value));
    });
  };
  const onParametersInitialized = ({ args }: { args: any }) => {
    console.log("ParametersInitialized");
    args.ActualParametersInfo.forEach((parameterModel: any) => {
      console.log("Parameter " + parameterModel.parameterDescriptor.name + " value " + JSON.stringify(parameterModel.parameterDescriptor.value));
    });
    args.ParametersModel['parameter1'] = 10;
    args.ShouldRequestParameters = false;
  };

  return (
    <>
      <button onClick={onClick}>Reset parameters</button>
      <ReportViewer ref={viewerRef} reportUrl="TestExportReport">
        <RequestOptions host="http://localhost:5000/" invokeAction="/DXXRDV" />
        <Callbacks ParametersReset={onParametersReset} ParametersSubmitted={onParametersSubmitted} ParametersInitialized={onParametersInitialized} />
      </ReportViewer>
    </>
  )
}

export default App

Vue

<template>
<div>
    <div>
        <button @click='doResetParameters'>TEST</button>
    </div>
    <div ref="viewer" style="position: absolute; left: 0; right: 0" data-bind="dxReportViewer: $data">
    </div>
</div>
</template>

<script>
import ko from "knockout";
import 'devexpress-reporting/dx-webdocumentviewer';

export default {
name: "WebDocumentViewer",
data() {
    return {
        previewModel: ko.observable(),
    }
},
methods: {
    doResetParameters() {
        this.previewModel().ResetParameters();
    },
},
    mounted() {
        var reportUrl = ko.observable("TestReport");
        var requestOptions = {
                // Specify the backend application URL.
                host: "https://localhost:44370/",
                // Use this line if you use an ASP.NET MVC backend
                //invokeAction: "/WebDocumentViewer/Invoke",
                // Use this line if you use an ASP.NET Core backend
                invokeAction: "DXXRDV"
            };
        var    callbacks = {  
            ParametersReset: function(s,e){
                alert("Parameter " + e.Parameters[0].path + " is reset to " + e.Parameters[0].value);
            }
        };    
        ko.applyBindings({
            reportUrl: reportUrl,
            viewerModel: this.previewModel,
            requestOptions: requestOptions,
            callbacks: callbacks
        }, this.$refs.viewer);
    },
beforeUnmount() {
    ko.cleanNode(this.$refs.viewer);
}
};
</script>

View Example: Reporting for React - Customize a Web Document Viewer in a React App (Next.js)