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

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

Setup the HTML5 Report Viewer dependencies on the page:

<!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" />

    <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.7.1/jquery.min.js"></script>
    <script src="/https/docs.telerik.com/api/reports/resources/js/telerikReportViewer"></script>

    <style>
        #reportViewer1 {
            position: absolute;
            inset: 5px;
            font-family: 'segoe ui', 'ms sans serif';
            overflow: hidden;
        }
    </style>
</head>

Display the custom parameter UI with a selector such as the 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 element:

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

Now, initialize the HTML5 Report Viewer widget. We will use the minimal set of all possible options. Note that 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: "Invoice.trdp",
            parameters: {
                OrderNumber: $('#invoiceId option:selected').val()
                }
        }
    });
});

Add code that updates the ReportSource parameters collection with the selected Invoice Id from the dropdown selector:

$('#invoiceId').change(function () {
var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");
reportViewer.reportSource({
    report: reportViewer.reportSource().report,
    parameters: { OrderNumber: $(this).val() }
    });
});

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

    <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.7.1/jquery.min.js"></script>
    <script src="/https/docs.telerik.com/api/reports/resources/js/telerikReportViewer"></script>

    <style>
        #reportViewer1 {
            position: absolute;
            inset: 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: "Invoice.trdp",
                        parameters: { OrderNumber: $('#invoiceId option:selected').val() }
                    },
            });
        });

        $('#invoiceId').change(function () {
            var reportViewer = $("#reportViewer1").data("telerik_ReportViewer");
            reportViewer.reportSource({
                report: reportViewer.reportSource().report,
                parameters: { OrderNumber: $(this).val() }
            });
        });
    </script>
</body>
</html>

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

Pass values to report parameters

See Also

Getting Started

Support Resources

Community