Set ActiveReports JS Viewer to Fullscreen mode

Set ActiveReports JS Viewer to Fullscreen mode

Posted by: travis.beltrametti on 28 August 2023, 2:13 am EST

• 

  travis.beltrametti

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 28 August 2023, 2:13 am EST - Updated 28 August 2023, 2:18 am EST

  We are using the JS Viewer in Angular. When we open a report, the viewer looks like this
  
  

  

  1330×1323 15.4 KB

  But we’d like to open the viewer in fullscreen mode like
  
  

  

  1357×1320 5.1 KB

  How can we do this?

• 

  anand.sinha

  

  • Post Options:
  • Link
    Copy

  Posted 28 August 2023, 5:17 pm EST

  Hi Travis,

  The ‘ViewerComponent’ has a parameter ‘fullscreen’ which accepts a boolean value, You can pass true upon initialization of your viewer and it will open in fullscreen on start.

  Please find attached a sample for the same.

  Regards,
  
  Anand

  arjs-angular-app.zip

• 

  travis.beltrametti

  • Post Options:
  • Link
    Copy

  Posted 29 August 2023, 12:11 am EST

  Thank you Anand, sorry for the confusion. I think we are using the ViewerJS and not the Angular Component.

  We create the viewer like this:

  this.viewer = GrapeCity.ActiveReports.JSViewer.create({
              element: '#viewerPlaceHolder',
              reportService: {
                  url: this.environmentService.baseUrl + '/api/reporting',
                  securityToken: `Bearer ${userToken}`
              },
              title: {
                  onUpdate: () => this.updateTitle()
              },
              settings: {
                  zoomType: 'FitPage'
              }
          });

• 

  anand.sinha

  

  • Post Options:
  • Link
    Copy

  Posted 30 August 2023, 8:43 pm EST

  Hi Travis,

  Apologies for misunderstanding your requirements. For JSViewer you can use the ‘JSViewer._viewer.toggleFullscree()’ method to toggle into full-screen mode in your report.

  Please find attached a sample implementing the same.

  Regards,
  
  Anand

  JSViewer_MVC.zip