Progress® Telerik® Reporting R3 2018

How To: Pass Values to Report Parameters

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

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

    Name the web page with the viewer InvoiceParameters.aspx. On 'Configure report source' step select 'Existing report definition', then 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);
        }
    }
  5. Add the report viewer stylesheet:

    HTML
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Telerik HTML5 Web Forms Report Viewer Form</title>
        <script src="http://code.jquery.com/jquery-1.9.1.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:

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

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

    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();
    });
  9. The HTML page that we have just created should looks like this:

    HTML
    <%@ 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="http://code.jquery.com/jquery-1.9.1.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.

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy