Progress® Telerik® Reporting R2 2017

Manual Setup

This topic shows you how to add the HTML5 Report Viewer to HTML page and display a report in it. To add the HTML5 Report Viewer via Visual Studio item template check Quick Start.

Prerequisites

  1. Review the HTML5 Report Viewer System Requirements.

  2. A running application that hosts a Reporting REST service at address /api/reports. For more information, see Telerik Reporting REST Services.

  3. A reference to the Reports Library from [TelerikReporting_InstallDir]\Examples\CSharp|VB\ReportLibrary\Bin in the project hosting the Reporting REST service.

  4. Telerik Kendo UI custom distribution for Telerik Reporting (located in [TelerikReporting_InstallDir]\Html5\ReportViewer\js) or Kendo UI mainstream distribution downloaded locally or via Kendo UI CDN service. You must load only one version of Telerik Kendo UI styles and scripts on the page e.g., version 2015.3.930

Utilizing the HTML5 Report Viewer in HTML page

The following steps produce an HTML page with settings similar to these of the local Html5Demo project, installed by default under [TelerikReporting_InstallDir]\Examples.

Tip Tip

All path references in the described steps should be adapted according to your project setup. For more information please refer to the MSDN article ASP.NET Web Project Paths

  1. Create an HTML5 page:

    Html
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>    
        <title>Telerik HTML5 Report Viewer</title>  
    </head>
    <body>    
    </body>
    </html>
    Tip Tip

    The above DOCTYPE directive should be considered with your custom requirements. More details about the used in the tutorial settings for the page can be found in the Defining document compatibility MSDN article.

  2. Initialize the browser’s viewport in the <head> element:

    Html
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

    The viewport META tag is used to control layout on mobile browsers.

  3. Add a reference to jQuery in the <head> element:

    Html
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    Note Note

    jQuery must be loaded only once on the page before creating the viewer object.

  4. Add references to Telerik Kendo UI scripts and styles in the <head> element:

    Html
    <!-- the required Kendo styles -->                  
    <link href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.blueopal.min.css" rel="stylesheet" />
    
    <!-- the required Kendo subset is located in {Telerik Reporting installation path}\Html5\ReportViewer\js -->  
    <script src="/ReportViewer/js/telerikReportViewer.kendo-x.x.x.x.min.js"></script>
    
    <!--If Kendo CDN is prefered here are the required Kendo widgets and bundles
    
    The minimum required widgets:
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.core.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.data.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.tooltip.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.calendar.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.datepicker.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.listview.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.menu.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.panelbar.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.treeview.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.popup.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.userevents.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.selectable.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.touch.min.js"></script>
    
    Widgets bundles:
    kendo.all.min.js can be used instead of the above widget list
    -->
  5. Copy and add the ReportViewer folder from [TelerikReporting_InstallDir]\Html5 to the application’s project.

    Note Note
    The HTML5 Report Viewer JavaScript widget does not required any references to Telerik Reporting in the project.
  6. Add references to the HTML5 Report Viewer JavaScript file to the <head> element:

    Html
    <script src="/ReportViewer/js/telerikReportViewer-x.x.x.x.js"></script>

    where x.x.x.x is the HTML5 ReportViewer/Telerik Reporting version (e.g. 8.1.14.618) and the used relative paths must be considered with the project's structure.

  7. Add a <div> element to the <body> element that will serve as a placeholder for the viewer’s widget. The <div> element's ID attribute serves as a key(Id) of the viewer object. Its content (loading...) if any will be displayed while the viewer’s content is loaded (from the template). :

    Html
    <div id="reportViewer1" class="k-widget">
        loading...
    </div>
  8. Add the following script element at the bottom of the <body> element and create the HTML5 Report Viewer widget for the reportViewer1 <div> element we have just added:

    JavaScript
    <script type="text/javascript">
            $("#reportViewer1")
                .telerik_ReportViewer({
                    serviceUrl: "/api/reports/",
                    //templateUrl: /ReportViewer/templates/telerikReportViewerTemplate-FA-x.x.x.x.html
                    reportSource: { 
                        report: "Telerik.Reporting.Examples.CSharp.ProductCatalog, CSharp.ReportLibrary",
                        parameters: {
                            CultureID: "en"
                        }
                    }
                });
    </script>

    where x.x.x.x is the HTML5 ReportViewer/Telerik Reporting version (e.g. 8.1.14.618) and the used relative paths must be considered with the project's structure.

    The default template is using TelerikWebUI icons if you prefer a template with FontAwesome icons you have to set the templateUrl option to /ReportViewer/templates/telerikReportViewerTemplate-FA-x.x.x.x.html

    Tip Tip

    The viewer's reportSource consist of report and parameters attributes, where report is the string description of the report that will be displayed, and parameters is a collection of paremeters' keys and values which will be sent to the report. The report's string description is handled on the server by the report resolver used in the Reporting REST service The above example uses the assembly qualified name of a report's type (report created in Visual Studio Report Designer). This string description will be handled automatically by the ReportTypeResolver.

  9. Make the viewer fill the entire browser window. Add the following style to the <head> element:

    Html
    <style>
            #reportViewer1 {
                position: absolute;
                left: 5px;
                right: 5px;
                top: 5px;
                bottom: 5px;
    
                font-family: 'segoe ui', 'ms sans serif';
    
                overflow: hidden;
            }
    </style>
    Tip Tip

    The above CSS rule will be applied on the <div> element holding the viewer object. The HTML elements building the viewer object will be sized based on the size of this container <div> element. To make the viewer fit in other container use position:relative , and provide witdh and height values.

  10. The HTML page that we have just created should look like this:

    Html
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Telerik HTML5 Report Viewer</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    
        <link href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.blueopal.min.css" rel="stylesheet" />
        <script src="/ReportViewer/js/kendo.subset.2015.3.930.min.js"></script>
        <script src="/ReportViewer/js/telerikReportViewer-8.1.14.816.js"></script>
    
        <style>
            #reportViewer1 {
                position: absolute;
                left: 5px;
                right: 5px;
                top: 5px;
                bottom: 5px;
    
                font-family: 'segoe ui', 'ms sans serif';
    
                overflow: hidden;
            }
        </style>
    </head>
    <body>
    
        <div id="reportViewer1" class="k-widget">
            loading...
        </div>
    
        <script type="text/javascript">
            $("#reportViewer1")
                .telerik_ReportViewer({
                    serviceUrl: "/api/reports/",
                    reportSource: { 
              report: "Telerik.Reporting.Examples.CSharp.ProductCatalog, CSharp.ReportLibrary",
              parameters: {
                CultureID: "en"
              }
            }
                });
        </script>
    
    </body>
    </html>
  11. Run the project and navigate to the page with the HTML5 Report Viewer that we have just created.