How to properly expand open report viewer

[Gurpreet]

Hey

I have a report screen with a collapsible pane, and when we load a report then collapse the pane the report viewer resizes, BUT, the scrollbar in the report viewer doesn't adjust itself.   What's the right way to trigger a UI refresh in the report viewer?

viewerContainerStyle = {
  position: 'absolute',
  width: '100%',
  height: '100%',
  ['font-family']: 'ms sans serif'
};

<tr-viewer #viewer1

           *ngIf="showReport"

           [containerStyle]="viewerContainerStyle"

           [serviceUrl]="serviceURL"

           [reportSource]="{report: filename, parameters: parameters}"

           templateUrl="assets/telerikReportViewerTemplate.html"

           [viewMode]="'PRINT_PREVIEW'"

           [scaleMode]="'FIT_PAGE_WIDTH'"

           [scale]="1.0"

           [enableAccessibility]="false">

</tr-viewer>

Right now I'm toggling showReport which causes the report viewer to redraw itself, fixing the issue, but some of the reports take a while to render and this is exceedingly annoying.

Thanks


[Neli]

Hello Gurpreet,

From the screenshots, we see that when the pane is collapsed there is some empty are. You can try to implement a custom function that will be triggered after the execution of the animation(collapsing/ expanding the pane) and it will resize the report viewer:

var documentMapSplitter = $("#reportViewerID .trv-document-map-splitter").data("kendoSplitter");
documentMapSplitter.resize(true);

var parameterSplitter = $("#reportViewerID .trv-parameters-splitter").data("kendoSplitter");
parameterSplitter.resize(true);

If the desired outcome is not achieved, consider sending us a sample project.

Regards,

Neli
Progress Telerik

[Gurpreet]

I'll try implementing a non-jQuery solution today and if I can't get the outcome I need I'll let you know.

Thanks

[Gurpreet]

Hey

The proposed solution didn't work, and trying to select the elements with vanilla JavaScript:

const documentMapSplitter = document.querySelector('#reportViewerID .trv-document-map-splitter');
const parameterSplitter = document.querySelector('#reportViewerID .trv-parameters-splitter');

const printPreviewArea = documentMapSplitter.querySelector('[data-id="trv-pages-area"]');
const parameterArea = parameterSplitter.querySelector('[data-id="trv-parameters-area"]');

 

and altering their widths also didn't work.  If you guys wrote an Angular viewer you should be listening for a change in the report viewer size event and managing the report viewer size as an internal state.   

If I need to use different JavaScript selectors, please provide them along with non-jQuery based code.

Thanks

[Veronika]

Hello Gurpreet,

The Angular Report Viewer is basically a jquery widget. Everything in its layout is Kendo jquery widgets. You can review the Overview article for more information. Parameters area, Document map area and the part where the report is rendered, are Kendo Splitters. By default, the splitter calculates its size based on the parent size. When the size of the parent is changed, the splitter has to be manually resized. Another way is to trigger a resize event on the window if this does not break something else in the project.

I have asked my colleagues from the Kendo team, whether is possible to get a Kendo widget instance without jquery. Unfortunately, it is not possible, so using vanilla javascript is not applicable.

As for the report viewer size event, thank you for your suggestion. We will explore and research how we could improve it.

I made a simple project that kind of demonstrates your scenario. Review it and if there is something wrong, let us know so we could investigate it further. 

Regards,
Veronika
Progress Telerik