How to properly expand open report viewer

5 posts, 0 answers
  1. Gurpreet
    Gurpreet avatar
    19 posts
    Member since:
    Nov 2018

    Posted 27 Jan Link to this post

    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


  2. Neli
    Admin
    Neli avatar
    252 posts

    Posted 30 Jan Link to this post

    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

    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
  3. Gurpreet
    Gurpreet avatar
    19 posts
    Member since:
    Nov 2018

    Posted 30 Jan in reply to Neli Link to this post

    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
  4. Gurpreet
    Gurpreet avatar
    19 posts
    Member since:
    Nov 2018

    Posted 30 Jan in reply to Neli Link to this post

    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

  5. Veronika
    Admin
    Veronika avatar
    17 posts

    Posted 04 Feb Link to this post

    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

    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
Back to Top