Dynamically pass parameter type on HTML5 Report Viewer

[Joseph]

We are trying to create a single report page that can handle a number of reports as opposed to 100's of pages to accomodate 100's of reports.  We are doing this by dynamically setting the report.  We can successfully do that and any parameter values.  But we cannot successfully dynamically define the paramters.
I'm going off of this documentation page (the code below is directly from that):  https://docs.telerik.com/reporting/html5-report-viewer-howto-use-it-with-reportserver
We are able to dynamically select the report and dynamically set the parameter value.  However, we are unable to set the parameter itself dynamically.  In the example below the parameter is ReportYear 
$("#reportViewer1")
  .telerik_ReportViewer({
    reportServer: {url: "http://yourReportServerUrl:port", username: null, password: null},
      reportSource: {
        report: "Samples/Dashboard" //WE CAN MAKE THE REPORT DYNAMIC TOO
        parameters: {
          ReportYear: 2004 //WE CAN MAKE 2004 A VARIABLE BUT ReportYear has to be hard coded in
        }
      }
  });

[Neli]

Hi Joseph,

I noticed that the same topic was discussed in support thread #1546245. I will repost my response here, so other users can also benefit from it.

If I understood correctly, you would like to modify the existing parameters or add new ones. If so, you will need to implement a CustomReportSourceResolver. You can use part of the logic from the Displaying Reports From Report Server Through Custom Report Source Resolver KB article:

 using (var sourceStream = new MemoryStream(reportDefinition.Content))
             {
                 if (extension == "trdx")
                 {
                     using (System.Xml.XmlReader xmlReader = System.Xml.XmlReader.Create(sourceStream))
                     {
                         Telerik.Reporting.XmlSerialization.ReportXmlSerializer xmlSerializer =
                             new Telerik.Reporting.XmlSerialization.ReportXmlSerializer();

                         report = (Telerik.Reporting.Report)
                            xmlSerializer.Deserialize(xmlReader);
                        // here you can add the logic for modifing the existing parameters of the report or add new ones
                     }
                 }
                 else
                 {
                     var reportPackager = new ReportPackager();
                     report = (Report)reportPackager.UnpackageDocument(sourceStream);
                     // here you can add the logic for modifing the existing parameters of the report or add new ones
                 }
             }

If the requirement is only to add new parameters, you can add a few extra parameters in design time with AllowNull = true. Then, you can set their values only when you need them and in this way, you don't need the custom code.

 

[Joseph]

This is great!  I have a follow up point of clarificaiton. 

It appears that this analyzes the 'trdx' file coming in.  Does that mean that XML grabs whatever parameters are in that report. 

For example:  

Report 1 has parameters A,B,C

Report 2 has parameters C, D, F

When I run this to display the report, if my report source is Report 1 then parameters A, B, C are passed BUT if my report source is report 2 then parameters C, D, F are passed? 

I should also note that we're using the Viewer with the Report Server 

[Neli]

Hi Joseph,

Only the values of these parameters which are in the report will be respected. For example, If you set parameters A,B,C,D,E,F and you pass Report 1, parameters D,E,F will not be respected.

[Romain]

If you want to use jquery with HTML5 Report, here is an example:

    $(document).ready(function() {
        var id = $('#myDropDownList').val();

        $("#report").telerik_ReportViewer({
            serviceUrl: "/api/reports/",
            viewMode: telerikReportViewer.ViewModes.INTERACTIVE,
            scaleMode: telerikReportViewer.ScaleModes.FIT_PAGE_WIDTH,
            scale: 1.0,
            enableAccessibility: false,
            sendEmail: { enabled: false },
            reportSource: {
                report: "MyReport.trdp",
                parameters: {
                    Id: id
                }
            }
        });

    });


    $('#myDropDownList').change(function() {
     
        var id = $('#myDropDownList').val();

        var viewer = $("#report").data("telerik_ReportViewer");
        viewer.reportSource({
            report: viewer.reportSource().report,
            parameters: {
                Id: id
            }
        });

    });