Passing URL Parameters to your Report - How To

5 posts, 0 answers
  1. John
    John avatar
    5 posts
    Member since:
    Mar 2018

    Posted 02 May Link to this post

    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>
    03.<head>
    04.    <title>Form My Report</title>
    05.    
    06.    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    07.    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    08. 
    09.    <script src="ReportViewer/js/jquery-1.9.1.min.js"></script>
    10. 
    11.    <link href="ReportViewer/CSS/kendo.common.min.css" rel="stylesheet" />
    12.    <link href="ReportViewer/CSS/kendo.blueopal.min.custom.css" rel="stylesheet" />
    13. 
    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-12.0.18.416.min.js"></script>
    16. 
    17.    <script src="ReportViewer/js/telerikReportViewer-12.0.18.416.min.js"></script>
    18. 
    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>
    30.</head>
    31.<body>
    32. 
    33.    <div id="reportViewer1">
    34.        loading...
    35.    </div>
    36. 
    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({
    50. 
    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 http://www.telerik.com/help/reporting/telerik-reporting-rest-conception.html.
    54.                    serviceUrl: "api/reports",
    55. 
    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 http://www.telerik.com/help/reporting/html5-report-viewer-templates.html.
    59.                    templateUrl: 'ReportViewer/templates/telerikReportViewerTemplate_custom.html',
    60. 
    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=1.0.0.0, Culture=neutral, PublicKeyToken=null", parameters: {
    66.                            TransMonth: getParameterByName('TransMonth'),
    67.                            TransYear: getParameterByName('TransYear'),
    68.                            PrevMonth: getParameterByName('PrevMonth'),
    69.                            ItemName: getParameterByName('ItemName')
    70.                    },
    71. 
    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,
    76. 
    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,
    83. 
    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,
    88. 
    89.                    ready: function () {
    90.                        //this.refreshReport();
    91.                    },
    92.                    }
    93.                });
    94.        });
    95.    </script>
    96. 
    97.</body>
    98.</html>
  2. Phil
    Phil avatar
    13 posts
    Member since:
    Jan 2011

    Posted 28 May in reply to John Link to this post

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

  3. Claudia
    Claudia avatar
    1 posts
    Member since:
    Mar 2017

    Posted 29 May Link to this post

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

  4. John
    John avatar
    5 posts
    Member since:
    Mar 2018

    Posted 29 May in reply to Claudia Link to this post

    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. 

  5. John
    John avatar
    5 posts
    Member since:
    Mar 2018

    Posted 01 Aug in reply to John Link to this post

    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.

     

Back to Top