Manual Setup Overview

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 MVC Report Viewer via the Visual Studio item template check the Quick Start article.

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 UriReportSourceResolver 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 Reporting CDN service. You must load only one version of Telerik Kendo UI styles and scripts on the page. For more information, see Kendo Widgets Requirements.

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.

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.

Create new ASP.NET MVC 4|5 Web Application.
To ensure that the browser will start in the latest rendering mode verify the view's layout page is using the following DOCTYPE directive:
```
<!DOCTYPE html>
```
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.
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 layout on mobile browsers.
The default viewer implementation depends externally on jQuery. Create a section named scripts and add link to jQuery in the view:
```
@section scripts
{
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
}
```
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).

Add references to Telerik Kendo UI scripts and 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" />

Add references to the following assemblies and set their Copy Local properties to true in Visual Studio:
- Telerik.Reporting
- Telerik.ReportViewer.Mvc
- Newtonsoft.Json, Version 9.0.0.0 or higher
The Telerik Reporting assemblies may be found by default in the folder [TelerikReporting_InstallDir]\Bin.

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

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

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

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

Add references to the HTML5 Report Viewer’s JavaScript file in the view:

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

The report viewer JavaScript should be referenced after any other Kendo widgets or bundles. If no Kendo widgets are utilized in 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 prefered 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>
-->

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)
       .EnableAccessibility(false)
       .Deferred()
       )

@Code
    Html.TelerikReporting().ReportViewer() _
    .Id("reportViewer1") _
    .ServiceUrl("/api/reports/") _
    .TemplateUrl("/ReportViewer/templates/telerikReportViewerTemplate.html") _
    .ReportSource(New UriReportSource() With {.Uri = "Product Catalog.trdp"}) _
    .ViewMode(ViewMode.Interactive) _
    .ScaleMode(ScaleMode.Specific) _
    .Scale(1.0) _
    .PersistSession(False) _
    .EnableAccessibility(False) _
    .Deferred()
End Code

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.

The viewer's ReportSource has four overloads allowing to specify report declaratively in code. The generated report's string description is sent and handled on the server by the report source 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 UriReportSourceResolver.

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())
```
```
@Code
    Html.TelerikReporting().DeferredScripts()
End Code
```
Make the viewer fill the entire browser window. Add the following style in the correspondingly named section in the view:
```
<style>
    #reportViewer1 {
        position: absolute;
        left: 5px;
        right: 5px;
        top: 5px;
        bottom: 5px;
        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 other container use relative position, and provide witdh and height values.
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.
```
@RenderSection("styles", required: false)
@RenderSection("scripts", required: false)
```

Finally the layout page should look like this:

<!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:

@section 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" />
    <style>
       #reportViewer1 {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 5px;
            bottom: 5px;
            overflow: hidden;
        }
    </style>
}
@section scripts
{
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="~/api/reports/resources/js/telerikReportViewer"></script>
    @(Html.TelerikReporting().DeferredScripts())
}
@(Html.TelerikReporting().ReportViewer()
     .Id("reportViewer1")
     .ServiceUrl("/api/reports/")
     .ReportSource(new UriReportSource() { Uri = "Product Catalog.trdp" })
     .Deferred()
)

Run the project and navigate to the view with the HTML5 ASP.NET MVC Report Viewer that we have just created.

Manual Setup Overview

Prerequisites

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

Getting Started

Support Resources

Community