Previewing Reports in JSViewer

In This Topic

The JSViewer when used in MVC and MVC Core applications, allows you to preview all the following file formats:

.rdl
.rdlx
.rpx
.rdlx-master

If you want to view Code-Based Section reports (.cs or .vb), or RDF files (.rdf) you need to follow a little different approach as elaborated in following sections.

Note:

Previewing Section reports and RDF files is not supported in Core applications.
The WebViewer and JSViewer are supported only in the Integrated pipeline mode. You will get PlatformNotSupportedException on using these Viewers in Classic pipeline mode.

To preview Code-Based Section reports in JSViewer

To view Code-Based Section reports (file format .cs or .vb), you need to do few modifications in your code provided in Configure JSViewer topic as follows:

1. Modify the startup.cs file as:

Startup.cs	Copy Code
public class Startup { public static string EmbeddedReportsPrefix = "'JSViewerMVCApplication1.Reports"; public void Configuration(IAppBuilder app) { app.UseErrorPage(); app.UseReporting(settings => { settings.UseEmbeddedTemplates(EmbeddedReportsPrefix, Assembly.GetAssembly(GetType())); settings.UseCompression = true; settings.UseCustomStore(GetReport); }); RouteTable.Routes.RouteExistingFiles = true; } public object GetReport(string reportName = "SectionReport") { SectionReport1 rpt = new SectionReport1(); return rpt; } }

Startup.cs

Copy Code

public class Startup
    {
        public static string EmbeddedReportsPrefix = "'JSViewerMVCApplication1.Reports";
        public void Configuration(IAppBuilder app)
        {
            app.UseErrorPage();
            app.UseReporting(settings =>
            {
                settings.UseEmbeddedTemplates(EmbeddedReportsPrefix, Assembly.GetAssembly(GetType()));
                settings.UseCompression = true;
                settings.UseCustomStore(GetReport);
            });
            RouteTable.Routes.RouteExistingFiles = true;
        }
        public object GetReport(string reportName = "SectionReport")
        {
            SectionReport1 rpt = new SectionReport1();
            return rpt;
        }
    }

Startup.vb	Copy Code
Public Class Startup Public Sub Configuration(ByVal app As IAppBuilder) app.UseReporting(Function(settings) settings.UseCompression = True settings.UseCustomStore(AddressOf GetReport) Return settings End Function) End Sub Private Function GetReport() As Object Dim rpt As New SectionReport1() Return rpt End Function

Startup.vb

Copy Code

Public Class Startup
    Public Sub Configuration(ByVal app As IAppBuilder)
 
        app.UseReporting(Function(settings)
                             settings.UseCompression = True
                             settings.UseCustomStore(AddressOf GetReport)
                             Return settings
                         End Function)
    
    End Sub
 
    Private Function GetReport() As Object
        Dim rpt As New SectionReport1()
        Return rpt
    End Function

2. Update index.html:

index.html	Copy Code
<html lang="en"> <head> <meta charset="utf-8"> <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <title>JSViewer</title> <link href="jsViewer.min.css" rel="stylesheet"> <link href="index.css" rel="stylesheet"> </head> <body onload="loadViewer()"> <div style="width: 100%; overflow-x: hidden"> <div style="float:right;width:100%" id="viewerContainer"> </div> </div> <script type="text/javascript" src="jsViewer.min.js"></script> <script type="text/javascript"> let viewer; function loadViewer() { viewer = GrapeCity.ActiveReports.JSViewer.create({ element: '#viewerContainer', reportID: 'JSViewerMVCApplication1.Reports.SectionReport1' }); } </script> </body> </html>

index.html

Copy Code

<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <title>JSViewer</title>
  <link href="jsViewer.min.css" rel="stylesheet">
  <link href="index.css" rel="stylesheet">
</head>
<body onload="loadViewer()">
  <div style="width: 100%; overflow-x: hidden">
    <div style="float:right;width:100%" id="viewerContainer">
    </div>
  </div>
  <script type="text/javascript" src="jsViewer.min.js"></script>
  <script type="text/javascript">
    let viewer;
    function loadViewer() {
      viewer = GrapeCity.ActiveReports.JSViewer.create({
          element: '#viewerContainer',
          reportID: 'JSViewerMVCApplication1.Reports.SectionReport1'    
      });        
    }
  </script>
</body>
</html>

To preview RDF files in JSViewer

To view RDF files (file format .rdf), you need to do few modifications in your code provided in Configure JSViewer topic as follows:

1. Update HomeController.cs to include 'rdf' as valid extension:

HomeController.cs	Copy Code
string[] validExtensions = { ".rdl", ".rdlx", ".rdlx-master", ".rpx", ".rdf" };

HomeController.vb	Copy Code
Dim validExtensions = {".rdl", ".rdlx", ".rdlx-master", ".rpx", ".rdf"}

2. Update index.html to include report name in viewer.openReport() method:

index.html	Copy Code
<html lang="en"> <head> <meta charset="utf-8"> <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <title>JSViewer</title> <link href="jsViewer.min.css" rel="stylesheet"> <link href="index.css" rel="stylesheet"> </head> <body onload="loadViewer()"> <div style="width: 100%; overflow-x: hidden"> <div style="float:right;width:100%" id="viewerContainer"> </div> </div> <script type="text/javascript" src="jsViewer.min.js"></script> <script type="text/javascript"> let viewer; function loadViewer() { viewer = GrapeCity.ActiveReports.JSViewer.create({ element: '#viewerContainer' }); viewer.openReport("RdfReport.rdf"); } </script> </body> </html>

index.html

Copy Code

<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel='shortcut icon' type='image/x-icon' href='favicon.ico' />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="theme-color" content="#000000">
  <title>JSViewer</title>
  <link href="jsViewer.min.css" rel="stylesheet">
  <link href="index.css" rel="stylesheet">
</head>
<body onload="loadViewer()">
  <div style="width: 100%; overflow-x: hidden">
    <div style="float:right;width:100%" id="viewerContainer">
    </div>
  </div>
  <script type="text/javascript" src="jsViewer.min.js"></script>
  <script type="text/javascript">
    let viewer;
    function loadViewer() {
      viewer = GrapeCity.ActiveReports.JSViewer.create({
          element: '#viewerContainer'        
      });    
     viewer.openReport("RdfReport.rdf");    
    }
  </script>
</body>
</html>