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.trdp" report file from C:\Program Files (x86)\Progress\Telerik Reporting 2025 Q2\Report Designer\Examples placed 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) Kendo UI for jQuery custom distribution for Telerik Reporting (located in C:\Program Files (x86)\Progress\Telerik Reporting 2025 Q2\Html5\ReportViewer\js) or Kendo UI for jQuery mainstream distribution downloaded locally or via the Reporting CDN service. You must load only one version of Kendo UI styles and scripts on the page. For more information, see Kendo Widgets Requirements.

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 WebFormsIntegrationDemo project, installed by default in the directory - C:\Program Files (x86)\Progress\Telerik Reporting 2025 Q2\Examples\CSharp\.NET Framework\WebFormsIntegrationDemo.

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 a 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 are available by default in the folder C:\Program Files (x86)\Progress\Telerik Reporting 2025 Q2\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.7.1/jquery.min.js"></script>
```
jQuery must be loaded only once on the page. Before adding jQuery, verify that it is not already loaded.

Add a reference to a Telerik Kendo UI SASS-Based Theme in the <head> element:

<link href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-ocean-blue.css" rel="stylesheet" />

(Optional) Add references to the Kendo UI for jQuery scripts in the <head> element:

    <!--If Kendo CDN is prefered here are the required Kendo widgets and bundles
The minimum required widgets:
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.core.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.data.odata.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.data.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.userevents.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.selectable.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.calendar.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.fx.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.draganddrop.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.mobile.scroller.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.virtuallist.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.popup.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.list.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.combobox.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.datepicker.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.resizable.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.dropdownlist.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.multiselect.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.splitter.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.window.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.color.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.slider.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.button.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.colorpicker.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.editor.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.listview.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.menu.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.panelbar.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.tooltip.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/js/kendo.treeview.min.js"></script>>
<script src="https://kendo.cdn.telerik.com/2025.1.227/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/2025.1.227/js/kendo.web.min.js"></script>>
kendo.mobile.min.js - optional, if gestures/touch support is required
<script src="https://kendo.cdn.telerik.com/2025.1.227/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's ReportSource using Visual Studio Property Grid. For this, you can use the "Product Catalog.trdp" report file.

If you use an 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 report 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 may look like the following:

<%@ 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>
    <link href="https://kendo.cdn.telerik.com/themes/10.2.0/default/default-ocean-blue.css" rel="stylesheet" />

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

    <style>
        #reportViewer1
        {
            position: absolute;
            inset: 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