Progress® Telerik® Reporting R3 2017

Manual Setup

This tutorial shows how to use HTML5 ASP.NET Web Forms Report Viewer in ASP.NET 4 Web Forms applications.

Prerequisites

  • Review the HTML5 Report Viewer System Requirements.

  • Copy of the "Product Catalog.trdx" report file from [TelerikReporting_InstallDir]\ReportDesigner\Examples in the folder used by the ReportFileResolver in the Reporting REST service implementation.

  • Entry with the default connection string used by Telerik Reporting sample reports in the web.config file of the project hosting the Reporting REST service:

    <connectionStrings>
       <add name="Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString"
                  connectionString="Data Source=(local);Initial Catalog=AdventureWorks;Integrated Security=SSPI"
                  providerName="System.Data.SqlClient" />
    </connectionStrings>
  • (Optional) Telerik Kendo UI custom distribution for Telerik Reporting (located in {Telerik Reporting installation path}\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

    If Kendo UI is not provided HTTPHandler will provide the required Kendo UI styles and scripts.

Using HTML5 ASP.NET Web Forms Report Viewer in a web application

The following steps produce a view with settings similar to these of the local WebFormsDemo project, installed by default under [TelerikReporting_InstallDir]\Examples. The structure used in this tutorial is a WebForm that does not use a Master page.

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 new ASP.NET Web Forms Application.

  2. Add new WebForm that does not use a Master page.

  3. To ensure that the browser will start in the latest rendering mode verify the page is using the following DOCTYPE directive:

    HTML
    <!DOCTYPE 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.

  4. 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.

  5. (Optional) The default viewer implementation depends externally on jQuery. Add link 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 adding jQuery, verify that it is not already loaded.

    If jQuery is not provided HTTPHandler will provide automatically the required script.

  6. (Optional) 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.calendar.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.datepicker.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.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.touch.min.js"></script>
    
    Widgets bundles:
    kendo.all.min.js can be used as well instead of kendo.web.min.js and kendo.mobile.min.js
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.web.min.js"></script>
    kendo.mobile.min.js - optional, if gestures/touch support is required
    <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.mobile.min.js"></script>
    -->
  7. Switch to the Design view of the Web Form and drag the viewer from Visual Studio Toolbox onto the designer surface. The ReportsController will be automatically added to your project, along with references to the required Telerik Reporting assemblies.

  8. Configure the HTML5 ASP.NET Web Forms Report Viewer ReportSource using Visual Studio Property Grid. For this you can use the "Product Catalog.trdx" report file (Prerequisites).

    Tip Tip

    If you use a UriReportSource, the Identifier must point to a TRDX file's path that will be mapped to the folder used by the ReportFileResolver in the Reporting REST service implementation.

    Tip Tip

    Verify the modified settings are written in the markup. If not, the viewer will use the default settings visible in Visual Studio Property Grid

  9. Set the viewer width and height.

  10. (Optional) If you set the viewer's Deferred to true, render the deferred initialization statement for the Report Viewer (remember that they must be rendered after jQuery):

    <telerik:DeferredScripts runat="server"></telerik:DeferredScripts>
  11. Finally the WebForm should look like this:

    HTML
    <%@ Register TagPrefix="telerik" Assembly="Telerik.ReportViewer.Html5.WebForms" Namespace="Telerik.ReportViewer.Html5.WebForms" %>
    
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Telerik HTML5 Web Forms Report Viewer Demo</title>
        <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/telerikReportViewer.kendo-x.x.x.x.min.js"></script>
    
        <style>
            #reportViewer1
            {
                position: absolute;
                left: 5px;
                right: 5px;
                top: 5px;
                bottom: 5px;
                overflow: hidden;
                font-family: Verdana, Arial;
            }
        </style>
    
    
    </head>
    <body>
        <form runat="server">
            <telerik:ReportViewer
                ID="reportViewer1"
                ServiceUrl="/api/reports/"
                Deferred="true"
                runat="server">
              <ReportSource Identifier="Product Catalog.trdx" IdentifierType="UriReportSource">
                    </ReportSource>
            </telerik:ReportViewer>
    
            <telerik:DeferredScripts runat="server"></telerik:DeferredScripts>
        </form>
    </body>
    </html>