ActiveReports 8
Customize HTML5 Viewer
Show AllShow All
Hide AllHide All

ActiveReports HTML5 Viewer is a fully customizable control. You can easily change the look of the viewer and show or hide the components using its public API.

The following example demonstrates few of the many modifications possible in the HTML5 Viewer. It shows setting the Custom uiType, adding the custom buttons for Print and Export and adding the Paginator control that allows you to display the number of report pages and to navigate through them.

Note: These steps assume that you have already created a new ASP.Net Web Application and added a sample report to display in the viewer.
  1. Add a new HTML page item to the project and in the Name field, rename the page item as HTML5Viewer.html.
  2. Copy and place GrapeCity.ActiveReports.Viewer.Html.js and GrapeCity.ActiveReports.Viewer.Html.css files in the project folder and add them to your project.
    Note: In ActiveReports, these files are located in the C:\Program Files\ComponentOne\ActiveReports 8\Deployment\Html folder.
  3. In the HTML5Viewer page item, add references to the stylesheets that will control the styling and appearance of the HTML5 Viewer.
    Note: You can obtain the source of Bootstrap.min.js from Content Delivery Network (CDN) like shown in the code below. You can also download the file from the source website and add the file to the project locally.

    Code

  4. Add the following DIV element inside the <body></body> tags that will contain the HTML5 Viewer and the Paginator control.

    Code

  5. Add the following Style element inside the <body></body> tags to make the viewer fill the entire browser window.

    Code

  6. Add the following DIV element inside the <body></body> tags that will contain the buttons for Print and Export.

    Code

  7. In the Project menu, click Add New Item, select ActiveReports 8 Web Service and then click the Add button. This adds the ActiveReports.ReportService.asmx file to the project.
  8. Add the reference to the GrapeCity.ActiveReports.Viewer.Html.js and its following dependencies:
    • jQuery 1.10.2 or higher
    • Bootstrap 3.1.0 or higher
    • Knockout 2.3.0 or higher
    Note: You can obtain the source of dependencies like jQuery from Content Delivery Network (CDN). You can also download and add them to the project locally.

    Code

  9. Add the following script element below other script elements to create the HTML5 Viewer for the viewer <div> element we have added above.

    Code

  10. Press F5 to run the project and navigate to the webpage containing the HTML5 Viewer that we have just created.
  11. As the report gets loaded in the viewer, use the paginator control to navigate through the all the report pages and click Print or Export to PDF to print or export the displayed report.
Support Forum