Embedding Reports / Displaying Reports / Web Application / HTML5 Report Viewer

New to Telerik Reporting? Download free 30-day trial

Manual Setup of the HTML5 Report Viewer in Web Applications in the .NET Framework

In this topic, we demonstrate how to manually add the HTML5 Report Viewer to an HTML page and to display a report. The approach that we use here allows for full control over the configuration. If you are looking for a less complicated approach, consider using the Visual Studio item templates.

Prerequisites

Before you continue, make sure that the following prerequisites are met:

  1. Familiarity with 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 from the project that hosts the Reporting REST service to the Reports Library located in the [TelerikReporting_InstallDir]\Examples\CSharp|VB\ReportLibrary\Bin folder.

  4. A script with the custom Telerik Kendo UI distribution for Telerik Reporting (located in the [TelerikReporting_InstallDir]\Html5\ReportViewer\js folder) or with the mainstream Kendo UI distribution downloaded locally or via the Kendo UI CDN service.

    You must load only one version of Telerik Kendo UI styles and scripts on the page. For more information see .

Utilizing the HTML5 Report Viewer in an 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:

You must adapt all path references in the steps below to your project setup. For more information, refer to the ASP.NET Web Project Paths Microsoft article.

  1. Create an HTML5 page:

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

    The above DOCTYPE directive must reflect your custom requirements. You can find more details about the page settings used in this tutorial in the Defining document compatibility Microsoft article.

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

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

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

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

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

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

    <!-- the required Kendo styles -->
<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.common.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.blueopal.min.css" rel="stylesheet" />

  5. Add references to the HTML5 Report Viewer JavaScript file in the <head> element:

    <script src="/api/reports/resources/js/telerikReportViewer"></script>

    The report viewer JavaScript must be referenced after any other Kendo widgets or bundles.

    If no Kendo widgets are utilized on the page, the report viewer will register a custom Kendo subset to enable the required Kendo widgets. The subset is served from the report service. If Kendo is used on the page or the CDN is preferred, make sure the following widgets are referenced:

    <!--
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.core.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.data.odata.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.data.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.userevents.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.selectable.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.calendar.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.fx.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.draganddrop.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.mobile.scroller.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.virtuallist.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.popup.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.list.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.combobox.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.datepicker.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.resizable.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.dropdownlist.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.multiselect.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.splitter.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.window.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.color.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.slider.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.button.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.colorpicker.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.editor.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.listview.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.menu.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.panelbar.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.tooltip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.treeview.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.touch.min.js"></script>
kendo.mobile.min.js - optional, if gestures/touch support is required
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.mobile.min.js"></script>
kendo.all.min.js or kendo.web.min.js can be used as well if Kendo is used outside the report viewer
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.web.min.js"></script>
-->

  6. 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) for the viewer object. Its content (loading...) will be displayed while the viewer’s content is being loaded (from the template):

    <div id="reportViewer1" class="k-widget">
    loading...
</div>

  7. Add the following script element at the bottom of the <body> element and create the HTML5 Report Viewer widget for the reportViewer1 <div> element that we just added:

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

    The relative paths that you use must reflect the project's structure. The default template uses TelerikWebUI icons. If you prefer a template with FontAwesome icons, you have to set the templateUrl option to /ReportViewer/templates/telerikReportViewerTemplate-FA-18.3.24.1218.html.

    The viewer's reportSource consists of report and parameters attributes, where report is the string description of the report that will be displayed, and parameters is a collection of parameter keys and values that will be sent to the report. The report's string description is handled on the server by the report source 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.

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

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

    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 another container, use position:relative and provide width and height values.

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

    <!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="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="https://kendo.cdn.telerik.com/2022.3.913/styles/kendo.blueopal.min.css" rel="stylesheet" />
    <script src="/api/reports/resources/js/telerikReportViewer"></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>

  10. Run the project and navigate to the page with the HTML5 Report Viewer that we have just created.

See Also

In this article
Related articles
Not finding the help you need? Improve this article