Embedding Reports / Displaying Reports / Web Application / HTML5 ASP.NET Web Forms Report Viewer / Customizing

New to Telerik Reporting? Download free 30-day trial

Passing Values to Report Parameters from Components Outside the HTML5 WebForms Report Viewer

This topic explains how to use custom parameters UI to update the report parameters instead of using the HTML5 Web Forms report viewer's default implementation of the parameters area. The report and all required parameters for it are packed in a ReportSource object. To update the report source the ReportViewer.reportSource(rs) method is used.

To give an example we will use the Invoice report from our examples and will update its OrderNumber parameter from a custom parameter UI.

Pass values to report parameters

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

  1. Create a new ASP.NET Web Forms Empty Project. We are going to use one of our demo Visual Studio reports. For this purpose add a new Telrik Report Library project to the solution from the VS item templates, name it Charp|VB.ReportLibrary, add the existing Invoice.cs report and its subreport SalesOrderDetails.cs from [TelerikReporting_InstallDir]\Examples\CSharp|VB\ReportLibrary\Invoice folder and built the Charp|VB.ReportLibrary project. Add reference to the ReportLibrary project in the Web Forms project.
  2. Then use the HTML5 Web Forms Report Viewer Item Template and name the web page with the viewer InvoiceParameters.aspx. On 'Configure report source' step select 'Existing report definition', then select 'Select type report definition created in Visual Studio' and browse Invoice report class. Finish the wizard.

  3. Add a connectiongStrings entry with name Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString in the project's web.config file. For example:

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

    At this point you have a running Web Forms application that displays a report in the HTML5 Web Forms Viewer at [host]/InvoiceParameters.aspx without any modifications.

  4. Add code for updating ReportSource Parameters collection in the code behind:

    protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.reportViewer1.ReportSource.Parameters.Add("OrderNumber", this.invoiceId.Value);
    }
}
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        Me.reportViewer1.ReportSource.Parameters.Add("OrderNumber", Me.invoiceId.Value)
    End If
End Sub

  5. Add the report viewer stylesheet:

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Telerik HTML5 Web Forms Report Viewer Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" /script>
    <style>
        #reportViewer1 {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 40px;
            bottom: 5px;
            overflow: hidden;
            font-family: Verdana, Arial;
        }
    </style>
</head>

  6. Add the custom parameter UI - a dropdown selector with a few values:

    <div id="invoiceIdSelector" runat="server">
    <label for="invoiceId">Invoices</label>
    <select id="invoiceId" title="Select the Invoice ID" runat="server">
        <option value="SO51081">SO51081</option>
        <option value="SO51082" selected="selected">SO51082</option>
        <option value="SO51083">SO51083</option>
    </select>
</div>

  7. Now initialize the report viewer. We will use the minimal set of all possible options.

    <telerik:ReportViewer ID="reportViewer1" Width="1300px" Height="900px" EnableAccessibility="false" runat="server">
    <ReportSource IdentifierType="TypeReportSource" Identifier="Telerik.Reporting.Examples.CSharp.Invoice, Charp.ReportLibrary, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null">
    </ReportSource>
</telerik:ReportViewer>

  8. Add code that updates the ReportSource parameters collection with the selected Invoice Id from the dropdown box:

    $('#invoiceId').change(function () {
    var viewer = $("#reportViewer1").data("telerik_ReportViewer");
    viewer.reportSource({
        report: viewer.reportSource().report,
        parameters: { OrderNumber: $(this).val() }
    });
    //setting the HTML5 Viewer's reportSource, causes a refresh automatically
    //if you need to force a refresh for other case, use:
    //viewer.refreshReport();
});

  9. The HTML page that we have just created should looks like this:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InvoiceParameters.aspx.cs" Inherits="WebFormsDocumentation.InvoiceParameters" %>
//for VB <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="InvoiceParameters.aspx.vb" Inherits="WebFormsDocVB._InvoiceParameters" %>
<%@ 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 Form</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" /script>
    <style>
        #reportViewer1 {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 40px;
            bottom: 5px;
            overflow: hidden;
            font-family: Verdana, Arial;
        }
    </style>
</head>
<body>
    <form runat="server">
        <div id="invoiceIdSelector" runat="server">
            <label for="invoiceId">Invoices</label>
            <select id="invoiceId" title="Select the Invoice ID" runat="server">
                <option value="SO51081">SO51081</option>
                <option value="SO51082" selected="selected">SO51082</option>
                <option value="SO51083">SO51083</option>
            </select>
        </div>
        <telerik:ReportViewer
            ID="reportViewer1"
            Width="1300px"
            Height="900px"
            EnableAccessibility="false"
            runat="server">
            <ReportSource IdentifierType="TypeReportSource" Identifier="Telerik.Reporting.Examples.CSharp.Invoice, Charp.ReportLibrary, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null">
            </ReportSource>
        </telerik:ReportViewer>
    </form>
    <script type="text/javascript">
            $('#invoiceId').change(function () {
                var viewer = $("#reportViewer1").data("telerik_ReportViewer");
                viewer.reportSource({
                    report: viewer.reportSource().report,
                    parameters: { OrderNumber: $(this).val() }
                });
                //setting the HTML5 Viewer's reportSource, causes a refresh automatically
                //if you need to force a refresh for other case, use:
                //viewer.refreshReport();
            });
    </script>
</body>
</html>

  10. Run the project and verify that the Invoice Id selection really updates the report.

In this article
Related articles
Not finding the help you need? Improve this article