Progress® Telerik® Reporting R2 2017

Manual Setup

This tutorial shows how to use HTML5 Report Viewer's ASP.NET MVC wrapper in ASP.NET MVC 4|5 applications. To add the HTML5 Report Viewer via Visual Studio item template check Quick Start

Prerequisites

  • Review the HTML5 Report Viewer System Requirements.

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

  • Copy of the "Product Catalog.trdp" 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>
  • 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

Depending on the used Visual Studio project template CSS and JS files can be linked in:

  • The HEAD element of the HTML document in the view, if the view is used as a standalone page.

  • The HEAD element of the layout page, if the view uses a layout page.

  • In a named section in the view, if the view uses a layout page, where sections are rendered by calling WebViewPage.RenderSection Method in the layout page.

Using HTML5 ASP.NET MVC Report Viewer in a web application

The following steps produce a view with settings similar to these of the local MvcDemo project, installed by default under [TelerikReporting_InstallDir]\Examples. The structure used in this tutorial is view that uses a layout 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 MVC 4|5 Web Application.

  2. To ensure that the browser will start in the latest rendering mode verify the view's layout 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.

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

  4. The default viewer implementation depends externally on jQuery. Create a section named scripts and add link to jQuery in the view:

    Html
    @section scripts
    {
      <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 from elsewhere in the application (layout page, section or bundle).

  5. 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>
    -->
  6. Copy and add the ReportViewer folder from [TelerikReporting_InstallDir]\Html5 to the application’s project.

  7. Add references to

    • Telerik.Reporting

    • Telerik.ReportViewer.Mvc

    assemblies and set their Copy Local properties to true in Visual Studio.

    Note Note

    Without setting Telerik Reporting references' Copy Local to true the assemblies may not be loaded correctly on running the application.

  8. Update the web.config file in the Views folder to include the Telerik.Reporting and Telerik.ReportViewer.Mvc namespaces:

    Html
    <system.web.webPages.razor>
        ...
        <pages pageBaseType="System.Web.Mvc.WebViewPage">
            <namespaces>
              ...
              <add namespace="Telerik.Reporting" />
              <add namespace="Telerik.ReportViewer.Mvc" />        
            </namespaces>
        </pages>
      </system.web.webPages.razor>
    Note Note

    Without registering the Telerik.Reporting and Telerik.ReportViewer.Mvc namespaces you will need to use using Directive in the view.

  9. Add references to the HTML5 Report Viewer’s JavaScript file in the view. Place the JS file in the correspondingly named section:

    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.

  10. Add the HTML5 ASP.NET MVC Report Viewer to the same view:

    @(Html.TelerikReporting().ReportViewer()
           .Id("reportViewer1")
           .ServiceUrl("/api/reports/")
           .TemplateUrl("/ReportViewer/templates/telerikReportViewerTemplate.html")
           .ReportSource(new UriReportSource() { Uri = "Product Catalog.trdp" })
           .ViewMode(ViewMode.Interactive)
           .ScaleMode(ScaleMode.Specific)
           .Scale(1.0)
           .PersistSession(false)
           .Deferred()
           )
    Tip Tip

    The above example uses deferred loading of the viewer to allow scripts to be handled properly, in case jQuery is not yet loaded on the page at the time the view is created. The used relative paths must be considered with the project's structure.

    Note Note

    The viewer's ReportSource has 4 overloads allowing to specify report declaratively in code. The generated report's string description is sent and handled on the server by the report resolver used in the Reporting REST service. The above example uses UriReportSource and a path to TRDP file (report created in the Standalone Report Designer). This string description will be handled automatically by the ReportFileResolver.

  11. Render the deferred initialization statement for the Report Viewer scripts (remember that they must be rendered after jQuery): In case that you do not need the script tag to be rendered just set to false the default argument.

    @(Html.TelerikReporting().DeferredScripts())
  12. Make the viewer fill the entire browser window. Add the following style in the correspondingly named section in the view:

    Html
    <style>
         #reportViewer1 {
              position: absolute;
              left: 5px;
              right: 5px;
              top: 5px;
              bottom: 5px;
              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 relative position, and provide witdh and height values.
  13. Open the layout page and call the RenderSection helper method in the <head> element. The method must be called for each named section in the view with the viewer - scripts section and styles section.

    Html
    @RenderSection("styles", required: false)
    @RenderSection("scripts", required: false)
  14. Finally the layout page should look like this:

    Html
    <!DOCTYPE html>
    <html>
    <head>
        <title>Demo</title>
        <meta charset="utf-8" />
    
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    
        @RenderSection("styles", required: false)
        @RenderSection("scripts", required: false)
    </head>
    <body>
        @RenderBody()
    </body>
    </html>

    The page with the HTML5 ASP.NET MVC Report Viewer should look like this:

    Html
    @section 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" />
    
        <style>
           #reportViewer1 {
                position: absolute;
                left: 5px;
                right: 5px;
                top: 5px;
                bottom: 5px;
                overflow: hidden;
            }
        </style>
    }
    
    @section scripts
    {
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="~/ReportViewer/js/telerikReportViewer.kendo-x.x.x.x.min.js"></script>
        <script src="~/ReportViewer/js/telerikReportViewer-x.x.x.x.js"></script>
        @(Html.TelerikReporting().DeferredScripts())
    }
    
    @(Html.TelerikReporting().ReportViewer()
            .Id("reportViewer1")
            .ServiceUrl("/api/reports/")
            .ReportSource(new UriReportSource() { Uri = "Product Catalog.trdp" })
            .Deferred()
    )
  15. Run the project and navigate to the view with the HTML5 ASP.NET MVC Report Viewer that we have just created.