angular report viewer will not render report in a dialog

Progress® Telerik® Reporting Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Pending Review

Last Updated: 29 Jan 2020 21:25 by Mike

Carl

Created on: 23 Jan 2020 04:41

Type: Bug Report

angular report viewer will not render report in a dialog

If I run the angular report viewer within my main page, all is well. However if the report viewer is hosted in a <p-dialog> (or <p-overlaypanel>), the report does not render (even though data is loaded and the report can be exported). To confirm this, I even have the report visible in a <tr-viewer> on the main page behind the dialog and load them at the same time.

If the dialog is not visible when the main page opens, then the report viewer toolbar is in a column on the left, and is not operational. (see attached)

If the dialog is visible when the main page opens, then the toolbar appears at the top and functions normally. (see attached)

<tr-viewer #rptViewerBody
[containerStyle]="viewerContainerStyle"
[serviceUrl]="reportServerUrl"
[viewMode]="'INTERACTIVE'"
[scaleMode]="'SPECIFIC'"
[scale]="1.0">
</tr-viewer>

<p-dialog modal="true"
appendTo="body"
header="Report"
[(visible)]="showReport"
[width]="1500"
[height]="1500">

<tr-viewer #rptViewerDialog
[containerStyle]="viewerContainerStyle"
[serviceUrl]="reportServerUrl"
[viewMode]="'INTERACTIVE'"
[scaleMode]="'SPECIFIC'"
[scale]="1.0">
</tr-viewer>
</p-dialog>

In the code, I tried both of these container styles. The result for the dialog was that relative position rendered the toolbar (top or left), but absolute position rendered nothing at all (height became 0)

this.viewerContainerStyle = {
position: 'absolute',
top: '0px',
left: '0px',
right: '0px',
bottom: '0px',
['font-family']: 'ms sans serif'
};
this.viewerContainerStyle = {
position: 'relative',
width: '1300px',
height: '1300px',
['font-family']: 'ms sans serif'
};

using @progress/telerik-angular-report-viewer": "7.19.718"

Thanks.

Attached Files:

2 comments

Mike

Posted on: 29 Jan 2020 21:25

For the dialog, I set dynamic="true" and used *ngIf= on the tr-viewer with the boolean expression the same as the visibility of the dialog.

ADMIN

Neli

Posted on: 29 Jan 2020 11:21

Hi Carl,

I believe the same question was discussed in а support ticket. I will summarize the response so our community can also benefit from it:

Such an issue can be caused by the tabs. By default, the tab contents are eagerly loaded. Eagerly loaded tabs will initialize the child components but not inject them into the DOM until the tab is activated. For that reason, you need to use lazy loading:

mat-tab-group [(selectedIndex)]="selectedTab">
             <mat-tab label="Tab Rpt Works">
                <ng-template matTabContent>
                  <button type="button" (click)="onLoad1Click($event)">Load</button>
                  <tr-viewer #reportViewer
                    [containerStyle]="viewerContainerStyle"
                    [serviceUrl]="reportServerUrl"
                    [viewMode]="'INTERACTIVE'"
                    [scaleMode]="'SPECIFIC'"
                    [scale]="1.0">
                  </tr-viewer>
                </ng-template>                  
              </mat-tab>  
          </mat-tab-group>

Regards,
Neli
Progress Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items