xtrareports-js-devexpress-dot-reporting-dot-viewer-8debb0ff.md
Provides information about a report preview.
export class ReportPreview extends ReportHolder
Provides access to a value that specifies whether the document is currently building.
documentBuilding: boolean
| Type | Description |
|---|---|
| boolean |
A boolean value that specifies whether the document is building.
|
errorMessage: string
| Type |
|---|
| string |
originalZoom: number
| Type |
|---|
| number |
Provides access to the current document page’s index.
pageIndex: number
| Type | Description |
|---|---|
| number |
A knockout observable object that specifies the zero-based index of the current page.
|
previewParametersViewModel: DevExpress.Reporting.Viewer.Parameters.PreviewParametersPanelModel
| Type |
|---|
| PreviewParametersPanelModel |
reportOpening: boolean
| Type |
|---|
| boolean |
Enables the Document Viewer’s multi-page mode.
showMultipagePreview: boolean
| Type | Description |
|---|---|
| boolean |
Specifies whether multi-page mode is enabled.
|
The following code snippet enables multi-page mode:
function onInit(s, e) {
s.GetReportPreview().zoom = 0.25;
s.GetReportPreview().showMultipagePreview = true;
}
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.
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 = True | Multipage = False |
|---|---|
tabPanel: DevExpress.Analytics.Utils.TabPanel
| Type |
|---|
| TabPanel |
Zooms the Document Viewer’s current document.
zoom: number
| Type | Description |
|---|---|
| number |
A knockout observable object that specifies the zoom factor.
|
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:
devexpress-reporting/dx-webdocumentviewerdevexpress-reporting/dx-reportdesignercreateViewModel(): DevExpress.Reporting.Viewer.IReportPreviewViewModel
| Type |
|---|
| IReportPreviewViewModel |
delayedInit(): void
goToReport(
customData?: string,
closeCurrentReport?: boolean
): PromiseLike<DevExpress.Reporting.Viewer.Utils.IPreviewInitialize>
| Name | Type |
|---|---|
| customData | string |
| closeCurrentReport | boolean |
| Type |
|---|
| PromiseLike<IPreviewInitialize> |
onPropertyChanged(
args: DevExpress.Analytics.Serializer.Native.PropertyChangedEventArgs<ReportPreview>
): void
| Name | Type |
|---|---|
| args | PropertyChangedEventArgs<ReportPreview> |
removeAllPages(): void
removePage(
page: DevExpress.Reporting.Viewer.Internal.PreviewPage
): void
| Name | Type |
|---|---|
| page | PreviewPage |
updateViewModel(
args: DevExpress.Analytics.Serializer.Native.PropertyChangedEventArgs<ReportPreview> | DevExpress.Analytics.Serializer.Native.ArrayPropertyChangedEventArgs<ReportPreview>
): void
| Name | Type |
|---|---|
| args | PropertyChangedEventArgs<ReportPreview> |