Manual Setup of the 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 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>

(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. For more information see Kendo Widgets Requirements. 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.

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

Create new ASP.NET Web Forms Application.
Add new WebForm that does not use a Master page.
Add references to the following assemblies and set their Copy Local properties to true in Visual Studio:
- Telerik.Reporting
- Telerik.ReportViewer.Html5.WebForms
- Newtonsoft.Json, Version 13.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.
To ensure that the browser will start in the latest rendering mode verify the 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 Microsoft 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.
(Optional) The default viewer implementation depends externally on jQuery. Add link 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 only once on the page. Before adding jQuery, verify that it is not already loaded.

(Optional) 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" />
<!--If Kendo CDN is prefered here are the required Kendo widgets and bundles
The minimum required widgets:
<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>>
Widgets bundles:
kendo.all.min.js can be used as well instead of kendo.web.min.js and kendo.mobile.min.js
<script src="https://kendo.cdn.telerik.com/2022.3.913/js/kendo.web.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>>
-->

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.
Configure the HTML5 ASP.NET Web Forms Report Viewer ReportSource using Visual Studio Property Grid. For this you can use the "Product Catalog.trdp" report file (Prerequisites).

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

Verify the modified settings are written in the markup. If not, the viewer will use the default settings visible in Visual Studio Property Grid.
Set the viewer width and height.
(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>
```

Finally the WebForm should look like this (note that the Report Parameter 'CultureID' value will be modified as passed from the viewer):

<%@ 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="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" />
    <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.trdp" IdentifierType="UriReportSource">
                <Parameters>
                    <telerik:Parameter Name="CultureID" Value="fr" />
                </Parameters>
          </ReportSource>
        </telerik:ReportViewer>
        <telerik:DeferredScripts runat="server"></telerik:DeferredScripts>
    </form>
</body>
</html>

Manual Setup of the HTML5 ASP.NET Web Forms Report Viewer in ASP.NET 4 Web Forms applications

Prerequisites

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

Getting Started

Support Resources

Community

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting

Testing & Mocking

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Manual Setup of the HTML5 ASP.NET Web Forms Report Viewer in ASP.NET 4 Web Forms applications

Prerequisites

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

Getting Started

Support Resources

Community