Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

ReportPreview Class

Provides information about a report preview.

#Declaration

TypeScript
export class ReportPreview extends ReportHolder

#Properties

#documentBuilding Property

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

#Declaration

TypeScript
documentBuilding: boolean

#Property Value

Type Description
boolean

A boolean value that specifies whether the document is building.

#errorMessage Property

#Declaration

TypeScript
errorMessage: string

#Property Value

Type
string

#originalZoom Property

#Declaration

TypeScript
originalZoom: number

#Property Value

Type
number

#pageIndex Property

Provides access to the current document page’s index.

#Declaration

TypeScript
pageIndex: number

#Property Value

Type Description
number

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

#previewParametersViewModel Property

#Declaration

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

#Property Value

Type
PreviewParametersPanelModel

#reportOpening Property

#Declaration

TypeScript
reportOpening: boolean

#Property Value

Type
boolean

#showMultipagePreview Property

Enables the Document Viewer’s multi-page mode.

#Declaration

TypeScript
showMultipagePreview: boolean

#Property Value

Type Description
boolean

A knockout observable object that specifies whether the multi-page mode is enabled.

#Remarks

The following code shows the BeforRender handler function that enables the MultiPage mode when the Document Viewer is initialized, and the CustomizeMenuActions event handler function that changes the toolbar icon when the MultiPage mode is toggled. Initially the Toggle Multipage Mode icon indicates the target mode; the code below changes the icon, so it indicates the current mode.

function onBeforeRender(s, e) {
     e.reportPreview.showMultipagePreview(true);
     s.GetPreviewModel().reportPreview.showMultipagePreview.subscribe(
          function (newValue) {
               s.myMultiPagePreview(newValue);
          }
     );
};

function onCustomizeMenuActions(s, e) {
     s.myMultiPagePreview = ko.observable(false);
     var multiPageToggle = e.GetById(DevExpress.Reporting.Viewer.ActionId.MultipageToggle);
     multiPageToggle.imageTemplateName = ko.pureComputed(
          function () {
               return s.myMultiPagePreview()
               ? 'dxrd-svg-preview-multi_page_preview'
               : 'dxrd-svg-preview-single_page';
          }
     );
};

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

Multipage = True Multipage = False
Multipage = True) Multipage = False)

#tabPanel Property

#Declaration

TypeScript
tabPanel: DevExpress.Analytics.Utils.TabPanel

#Property Value

Type
TabPanel

#zoom Property

Zooms the Document Viewer’s current document.

#Declaration

TypeScript
zoom: number

#Property Value

Type Description
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.

<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

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

#Returns

Type
IReportPreviewViewModel

#delayedInit Method

#Declaration

TypeScript
delayedInit(): void

#goToReport Method

#Declaration

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

#Parameters

Name Type
customData string
closeCurrentReport boolean

#Returns

Type
PromiseLike<IPreviewInitialize>

#onPropertyChanged(args) Method

#Declaration

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

#Parameters

Name Type
args PropertyChangedEventArgs<ReportPreview>

#removeAllPages Method

#Declaration

TypeScript
removeAllPages(): void

#removePage(page) Method

#Declaration

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

#Parameters

Name Type
page PreviewPage

#updateViewModel(args) Method

#Declaration

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

#Parameters

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