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

This topic explains how to use custom parameters UI to update the report parameters instead of using the 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 MSDN article ASP.NET Web Project Paths

Add a new html page CustomParameters.html to the CSharp.Html5Demo or VB.Html5Demo project.

Add the references to all required JavaScript libraries and stylesheets:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Telerik HTML5 Report Viewer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="/kendo/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="/kendo/styles/kendo.blueopal.min.css" rel="stylesheet" />
    <script src="/ReportViewer/js/telerikReportViewer.kendo-18.3.24.1218.min.js"></script>
    <script src="/ReportViewer/js/telerikReportViewer-18.3.24.1218.min.js"></script>
    <style>
        #reportViewer1 {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 40px;
            bottom: 5px;
            font-family: 'segoe ui', 'ms sans serif';
            overflow: hidden;
        }
    </style>
</head>

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

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

Add the ReportViewer placeholder

<div id="reportViewer1">
    loading...
</div>

Now initialize the report viewer. We will use the minimal set of all possible options. Please note how the value from the custom UI is used to set the OrderNumber report parameter initially:

$(document).ready(function () {
    $("#reportViewer1").telerik_ReportViewer({
        serviceUrl: "api/reports/",
        reportSource: {
            report: "Telerik.Reporting.Examples.CSharp.Invoice, CSharp.ReportLibrary",
            parameters: { OrderNumber: $('#invoiceId option:selected').val() }
        },
        ready: function () {
            //this.refreshReport();
        }
    });
});

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 cases, use:
    //viewer.refreshReport();
});

The HTML page that we have just created should look like this:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Telerik HTML5 Report Viewer Demo With Custom Parameter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <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" />
    <script src="/ReportViewer/js/telerikReportViewer.kendo.18.3.24.1218.min.js"></script>
    <script src="ReportViewer/js/telerikReportViewer-18.3.24.1218.min.js"></script>
    <style>
        #reportViewer1 {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 40px;
            bottom: 5px;
            overflow: hidden;
            font-family: Verdana, Arial;
        }
    </style>
</head>
<body>
    <div id="invoiceIdSelector">
        <label for="invoiceId">Invoices</label>
        <select id="invoiceId" title="Select the Invoice ID">
            <option value="SO51081">SO51081</option>
            <option value="SO51082" selected="selected">SO51082</option>
            <option value="SO51083">SO51083</option>
        </select>
    </div>
    <div id="reportViewer1">
        loading...
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#reportViewer1").telerik_ReportViewer({
                    serviceUrl: "api/reports/",
                    reportSource: {
                        report: "Telerik.Reporting.Examples.CSharp.Invoice, CSharp.ReportLibrary",
                        parameters: { OrderNumber: $('#invoiceId option:selected').val() }
                    },
            });
        });
        $('#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 cases, use:
            //viewer.refreshReport();
        });
    </script>
</body>
</html>

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

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

Pass values to report parameters

See Also

Getting Started

Support Resources

Community