This is a migrated thread and some comments may be shown as answers.

Passing URL Parameters to your Report - How To

4 Answers 591 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
John asked on 02 May 2018, 01:05 PM

I looked for  a long time for this information. I watched YouTube videos, went to blogs, and contacted Telerik support. I decided when I figured this out I was going to post the code so that someone else would not have to struggle with figuring this out like I did. Support helped and pointed me in the right direction to put this together but no easy example to go by. Below is the code for the HTML5 Report Viewer that I use and seems to work exactly like I wanted. It is javascript that parses the URL string and then is fed to the parameters of your report. The only part of this that you should have to change is the the section that is called "reportSource:" the parameters section. In the example below change the first part "TransMonth: " to the name of the parameter you used in your report and change the name at the end to what your URL parameter is called " getParameterByName('TransMonth') " Mine were named the same for simplicity. See the entire code below. Also some of the js and css files have custom paths in the example below. Adjust yours accordingly. I'm far from an expert at this but I know it took me a while to get this working and I thought if I could save someone else this headache I would.

01.<!DOCTYPE html>
04.    <title>Form My Report</title>
06.    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
07.    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
09.    <script src="ReportViewer/js/jquery-1.9.1.min.js"></script>
11.    <link href="ReportViewer/CSS/kendo.common.min.css" rel="stylesheet" />
12.    <link href="ReportViewer/CSS/kendo.blueopal.min.custom.css" rel="stylesheet" />
14.    <!--kendo.web.min.js or kendo.all.min.js can be used as well instead of the following custom Kendo UI-->
15.    <script src="ReportViewer/js/telerikReportViewer.kendo-"></script>
17.    <script src="ReportViewer/js/telerikReportViewer-"></script>
19.  <style>
20.        #reportViewer1 {
21.            position: absolute;
22.            left: 5px;
23.            right: 5px;
24.            top: 5px;
25.            bottom: 5px;
26.            overflow: hidden;
27.            font-family: Verdana, Arial;
28.        }
29.    </style>
33.    <div id="reportViewer1">
34.        loading...
35.    </div>
37.    <script type="text/javascript">
38.        function getParameterByName(name, url) {
39.            if (!url) url = window.location.href;
40.            name = name.replace(/[\[\]]/g, "\\$&");
41.            var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
42.                results = regex.exec(url);
43.            if (!results) return null;
44.            if (!results[2]) return '';
45.            return decodeURIComponent(results[2].replace(/\+/g, " "));
46.        }
47.        $(document).ready(function () {
48.            $("#reportViewer1")
49.                .telerik_ReportViewer({
51.                    // The URL of the service which will serve reports.
52.                    // The URL corresponds to the name of the controller class (ReportsController).
53.                    // For more information on how to configure the service please check
54.                    serviceUrl: "api/reports",
56.                    // The URL for custom report viewer template. The template can be edited -
57.                    // new functionalities can be added and unneeded ones can be removed.
58.                    // For more information please check
59.                    templateUrl: 'ReportViewer/templates/telerikReportViewerTemplate_custom.html',
61.                    //ReportSource - report description
62.                    reportSource: {
63.                        // The report can be set to a report file name (trdx report definition)
64.                        // or CLR type name (report class definition).
65.                        report: "ReportApplication.FormMyReport, ReportApplication, Version=, Culture=neutral, PublicKeyToken=null", parameters: {
66.                            TransMonth: getParameterByName('TransMonth'),
67.                            TransYear: getParameterByName('TransYear'),
68.                            PrevMonth: getParameterByName('PrevMonth'),
69.                            ItemName: getParameterByName('ItemName')
70.                    },
72.                    // Specifies whether the viewer is in interactive or print preview mode.
73.                    // PRINT_PREVIEW - Displays the paginated report as if it is printed on paper. Interactivity is not enabled.
74.                    // INTERACTIVE - Displays the report in its original width and height without paging. Additionally interactivity is enabled.
75.                    viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
77.                    // Sets the scale mode of the viewer.
78.                    // Three modes exist currently:
79.                    // FIT_PAGE - The whole report will fit on the page (will zoom in or out), regardless of its width and height.
80.                    // FIT_PAGE_WIDTH - The report will be zoomed in or out so that the width of the screen and the width of the report match.
81.                    // SPECIFIC - Uses the scale to zoom in and out the report.
82.                    scaleMode: telerikReportViewer.ScaleModes.SPECIFIC,
84.                    // Zoom in and out the report using the scale
85.                    // 1.0 is equal to 100%, i.e. the original size of the report
86.                    scale: 1.0,
87.                    enableAccessibility: false,
89.                    ready: function () {
90.                        //this.refreshReport();
91.                    },
92.                    }
93.                });
94.        });
95.    </script>

4 Answers, 1 is accepted

Sort by
Top achievements
Rank 1
answered on 28 May 2018, 03:03 PM

"save someone else this headache I would" 

Indeed you did!  Tech Support referenced your post as a possible to solution to this exact problem I was having.

Thank you very, very much.

Top achievements
Rank 1
answered on 29 May 2018, 12:39 PM

Hello John,

can you please show an example how you use the parameters in your reports? For me it is not clear, where I can use the parametervalues in my report. I add a reportparameter with the name of my parameter I want to send from javascript, but the value of the reportparameter is always null...

Top achievements
Rank 1
answered on 29 May 2018, 01:33 PM

You have to set the parameters in 2 other places. One is the datasource you are using, I'm using SQL Server. (See attached image.) Then you click on your report and add parameters using the ReportParameter Collection Editor. (See attached image.) 

(You don't have to do this part. This is just the explanation of why I allow null parameters.) I have my parameters set to AllowNull = True because if there are not any parameters passed through the URL I want it to show an error. 

Top achievements
Rank 1
answered on 01 Aug 2018, 06:08 PM

I discovered that the viewMode and scaleMode does not work with the above html correctly. You need to move the report source section below the viewMode and scaleMode section. I actually put it below the enableAccessibility section. Then everything works correctly. See attached image.


General Discussions
Asked by
Top achievements
Rank 1
Answers by
Top achievements
Rank 1
Top achievements
Rank 1
Top achievements
Rank 1
Share this question