Viewing Reports

Viewing Reports in HTML5 Viewer

The following steps describe how to view reports in HTML5 Viewer.

Create a new Visual Studio Web Application project.
Copy and place GrapeCity.ActiveReports.Viewer.Html.js, GrapeCity.ActiveReports.Viewer.Html.min.js and GrapeCity.ActiveReports.Viewer.Html.css files at a suitable location near the target HTML page.
Note: In ActiveReports, these files are located in the C:\Program Files\GrapeCity\ActiveReports 10\Deployment\Html

In the target HTML page, add the references to the GrapeCity.ActiveReports.Viewer.Html.css, GrapeCity.ActiveReports.Viewer.Html.js and its following dependencies:

jQuery 1.9.0 or higher
Bootstrap 3.0
Knockout.js 2.3.0 or higher

Note: You can obtain the dependencies like jQuery from Content Delivery Network (CDN) or copy them locally.

Paste inside the <head></head> tags	Copy Code
<link rel="stylesheet" href="css/GrapeCity.ActiveReports.Viewer.Html.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script> <script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js" type="text/javascript"></script> <script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js" type="text/javascript"></script>

Paste inside the <head></head> tags

Copy Code

<link rel="stylesheet" href="css/GrapeCity.ActiveReports.Viewer.Html.css" />    
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js" type="text/javascript"></script>
<script src="Scripts/GrapeCity.ActiveReports.Viewer.Html.js" type="text/javascript"></script>

Add the reference to the bootstrap.min.css in the target HTML page.

Paste inside the <head></head> tags	Copy Code
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

In the target HTML page, add the DIV element that will contain the HTML5 Viewer.

Paste inside the <body></body> tags	Copy Code
<div id="viewer" style="width:800px;height:600px;"></div>

From the Project menu, select Add New Item.

Open the licenses.licx file, and add the following references to it.

Paste inside the licenses.licx file

Paste inside the licenses.licx file	Copy Code
GrapeCity.ActiveReports.SectionReport, GrapeCity.ActiveReports.v10, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff GrapeCity.ActiveReports.PageReport, GrapeCity.ActiveReports.v10, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff GrapeCity.ActiveReports.Export.Pdf.Section.PdfExport, GrapeCity.ActiveReports.Export.Pdf.v10, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff GrapeCity.ActiveReports.Web.WebViewer, GrapeCity.ActiveReports.Web.v10, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff

Copy Code

GrapeCity.ActiveReports.SectionReport, GrapeCity.ActiveReports.v10, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff
GrapeCity.ActiveReports.PageReport, GrapeCity.ActiveReports.v10, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff
GrapeCity.ActiveReports.Export.Pdf.Section.PdfExport, GrapeCity.ActiveReports.Export.Pdf.v10, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff
GrapeCity.ActiveReports.Web.WebViewer, GrapeCity.ActiveReports.Web.v10, Version=9.99.1979.0, Culture=neutral, PublicKeyToken=cc4967777c49a3ff

In the Add New Item dialog that appears, select ActiveReports 10 Web Service and click Add. The ActiveReports 10 Web Service is required for the proper functioning of the HTML5 Viewer.
Add an ActiveReport to the Visual Studio project. See Adding an ActiveReport to a Project for information on adding different report layouts.

Add the following code to view your report in the HTML5 Viewer. The code might vary depending on the technology that you use to develop the HTML5 Viewer component.

Paste inside the <script></script> tags	Copy Code
$(function () { var viewer = GrapeCity.ActiveReports.Viewer( { element: '#viewer', report: { id: "PageReport.rdlx" }, reportService: { url: '/ActiveReports.ReportService.asmx' }, uiType: 'desktop' }); });

Paste inside the <script></script> tags

Copy Code

$(function ()
{
   var viewer = GrapeCity.ActiveReports.Viewer(
   {
      element: '#viewer',
      report: {
         id: "PageReport.rdlx"

      },
      reportService: {
         url: '/ActiveReports.ReportService.asmx'
      },
      uiType: 'desktop'
      
   });
});

Press F5 to run the project.

Viewing reports from different domains using CORS

Cross-Origin Resource Sharing is a technology for the web that provides async web operations to directly access reports from different domains. CORS works by adding a special header to responses from a server to the client. If a response contains the Access-Control-Allow-Origin header, then you can directly access the reports from another domain. If you get error 404 or 500 on the report preview, please make sure that your browser supports CORS.

The following steps describe how to access reports from different domain using CORS.

Add Global Application Class file (Global.asax) in your application on the service side.

Open the Global.asax.cs file, and add the following code to access reports using cross websites.

Paste inside the Global.asax.cs

Paste inside the Global.asax.cs	Copy Code
`protected void Application_BeginRequest(object sender, EventArgs e) { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*"); if (HttpContext.Current.Request.HttpMethod == "OPTIONS") { HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS"); HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept"); HttpContext.Current.Response.End(); }`

Copy Code

 protected void Application_BeginRequest(object sender, EventArgs e)
     {
       HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
       if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
         {
           HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS");
           HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
           HttpContext.Current.Response.End();
         }

Paste inside the Global.asax.vb

Paste inside the Global.asax.vb	Copy Code
`Sub Application_BeginRequest(ByVal sender As Object, ByVal e As EventArgs) HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*") If HttpContext.Current.Request.HttpMethod = "OPTIONS" Then HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS") HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept") HttpContext.Current.Response.End() End If End Sub`

Copy Code

Sub Application_BeginRequest(ByVal sender As Object, ByVal e As EventArgs)
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*")
        If HttpContext.Current.Request.HttpMethod = "OPTIONS" Then
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS")
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept")
            HttpContext.Current.Response.End()
        End If
    End Sub

Note: In case of Internet Explorer 9, you need to add $.support.cors = true; code on the client side while initializing the HTML5 Viewer to access reports from a different domain.

Getting Started

HTML5 Viewer

Using Javascript