Back to Devexpress

ReportPreview Class

xtrareports-js-devexpress-dot-reporting-dot-viewer-8debb0ff.md

latest6.8 KB
Original Source

ReportPreview Class

Provides information about a report preview.

Declaration

ts
export class ReportPreview extends ReportHolder

Properties

documentBuilding Property

Provides access to a value that specifies whether the document is currently building.

Declaration

ts
documentBuilding: boolean

Property Value

TypeDescription
boolean

A boolean value that specifies whether the document is building.

|

errorMessage Property

Declaration

ts
errorMessage: string

Property Value

Type
string

originalZoom Property

Declaration

ts
originalZoom: number

Property Value

Type
number

pageIndex Property

Provides access to the current document page’s index.

Declaration

ts
pageIndex: number

Property Value

TypeDescription
number

A knockout observable object that specifies the zero-based index of the current page.

|

previewParametersViewModel Property

Declaration

ts
previewParametersViewModel: DevExpress.Reporting.Viewer.Parameters.PreviewParametersPanelModel

Property Value

Type
PreviewParametersPanelModel

reportOpening Property

Declaration

ts
reportOpening: boolean

Property Value

Type
boolean

showMultipagePreview Property

Enables the Document Viewer’s multi-page mode.

Declaration

ts
showMultipagePreview: boolean

Property Value

TypeDescription
boolean

Specifies whether multi-page mode is enabled.

|

Remarks

The following code snippet enables multi-page mode:

js
function onInit(s, e) {
     s.GetReportPreview().zoom = 0.25;
     s.GetReportPreview().showMultipagePreview = true;
}

Example: Change Icon to Reflect Active Preview Mode

The following code sample shows two functions: the onBeforeRender handler function that enables MultiPage mode when the Document Viewer is initialized, and the onCustomizeMenuActions event handler function that changes the toolbar icon when MultiPage mode is toggled. Initially, the Toggle Multipage Mode icon indicates the target mode; the code sample below changes the icon to indicate the current mode.

javascript
function onBeforeRender(s, e) {
     const preview = s.GetReportPreview();
     const previewModel = s.GetPreviewModel().reportPreview;
     previewModel.events.on('propertyChanged', (args) => {
          if (args.propertyName === 'showMultipagePreview') {
          const imageTemplateName = args.newValue ? 'dxrd-svg-preview-multi_page_preview' : 'dxrd-svg-preview-single_page';
          s.myMultiPagePreviewAction.imageTemplateName = imageTemplateName;
          }
     });
     preview.showMultipagePreview = true;
};
function onCustomizeMenuActions(s, e) {
     const multiPageToggle = e.GetById(DevExpress.Reporting.Viewer.ActionId.MultipageToggle);
     s.myMultiPagePreviewAction = multiPageToggle;
}

The result is shown below. Note that the Toggle Multipage Mode button displays a single page icon when single page mode is enabled, and a multipage icon when multipage mode is enabled.

Multipage = TrueMultipage = False

tabPanel Property

Declaration

ts
tabPanel: DevExpress.Analytics.Utils.TabPanel

Property Value

Type
TabPanel

zoom Property

Zooms the Document Viewer’s current document.

Declaration

ts
zoom: number

Property Value

TypeDescription
number

A knockout observable object that specifies the zoom factor.

|

Remarks

Call the zoom method to zoom a document by a specific zoom factor passed as a parameter.

You can also use the following values of the DevExpress.Reporting.Viewer.ZoomAutoBy object as a function parameter: None , WholePage and PageWidth.

aspx
<script>
    function Init(s, e) {
        s.GetReportPreview().zoom = 0.9;
        //s.GetReportPreview().zoom = DevExpress.Reporting.Viewer.ZoomAutoBy.PageWidth;
    }
</script>

<dx:ASPxWebDocumentViewer ID="ASPxWebDocumentViewer1" runat="server" ReportSourceId="DXWebApplication1.XtraReport1">
    <ClientSideEvents Init="Init"/>
</dx:ASPxWebDocumentViewer>

Constants and enums in TypeScript code may require the import directive. The following example declares the DevExpress.Reporting.Viewer.ZoomAutoBy enum:

import { ZoomAutoBy } from "devexpress-reporting/viewer/constants";

You can import constants from the following sources:

  • Document Viewer : devexpress-reporting/dx-webdocumentviewer
  • Report Designer : devexpress-reporting/dx-reportdesigner

Methods

createViewModel Method

Declaration

ts
createViewModel(): DevExpress.Reporting.Viewer.IReportPreviewViewModel

Returns

Type
IReportPreviewViewModel

delayedInit Method

Declaration

ts
delayedInit(): void

goToReport Method

Declaration

ts
goToReport(
    customData?: string,
    closeCurrentReport?: boolean
): PromiseLike<DevExpress.Reporting.Viewer.Utils.IPreviewInitialize>

Parameters

NameType
customDatastring
closeCurrentReportboolean

Returns

Type
PromiseLike<IPreviewInitialize>

onPropertyChanged(args) Method

Declaration

ts
onPropertyChanged(
    args: DevExpress.Analytics.Serializer.Native.PropertyChangedEventArgs<ReportPreview>
): void

Parameters

NameType
argsPropertyChangedEventArgs<ReportPreview>

removeAllPages Method

Declaration

ts
removeAllPages(): void

removePage(page) Method

Declaration

ts
removePage(
    page: DevExpress.Reporting.Viewer.Internal.PreviewPage
): void

Parameters

NameType
pagePreviewPage

updateViewModel(args) Method

Declaration

ts
updateViewModel(
    args: DevExpress.Analytics.Serializer.Native.PropertyChangedEventArgs<ReportPreview> | DevExpress.Analytics.Serializer.Native.ArrayPropertyChangedEventArgs<ReportPreview>
): void

Parameters

NameType
argsPropertyChangedEventArgs<ReportPreview>