Progress® Telerik® Reporting R3 2017

How To: Pass Values to Report Parameters

This topic explains how to use custom parameters UI to update the report parameters instead of using the MVC 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 local examples and will update its OrderNumber parameter from a custom parameter UI.

Pass values to report parameters

Tip Tip

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

  1. Create a new ASP.NET MVC 4+ Empty Project and add reference to [TelerikReporting_InstallDir]\Examples\CSharp|VB\ReportLibrary\bin\CSharp|VB.ReportLibrary.dll .

  2. Then use the HTML5 MVC Report Viewer Item Template

    Name the view with the viewer InvoiceParameters.cshtml|vbhtml. On 'Configure report source' step select 'Existing report definition', then select 'Type report definition created in Visual Studio' and browse Invoice report class.

    Finish the wizard.

  3. Add MVC Controller item under the project's Controller folder and name it HomeController.cs|vb, and add an ActionResult method named InvoiceParameters. Move the InvoiceParameters.cshtml|vbhtml file under the newly added Views\Home folder.

    Add a connectiongStrings entry with name Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString in the project's web.config file. For example:

    <connectionStrings>
       <add name="Telerik.Reporting.Examples.CSharp.Properties.Settings.TelerikConnectionString"
                  connectionString="Data Source=(local);Initial Catalog=AdventureWorks;Integrated Security=SSPI"
                  providerName="System.Data.SqlClient" />
    </connectionStrings>

    At this point you have a running MVC application that displays a report in the HTML5 MVC Viewer at [host]/Home/InvoiceParameters without any modifications.

  4. These are the model and the view model that we will use for our view:

    public class Invoice
    {
        public int Id { get; set; }
        public string Value { get; set; }
    }
    
    public class InvoiceViewModel
    {
        readonly List<Invoice> invoices;
    
        [Display(Name = "Invoices")]
        public int SelectedInvoiceId { get; set; }
    
        public string SelectedInvoice
        {
            get { return this.invoices[this.SelectedInvoiceId].Value; }
        }
    
        public IEnumerable<SelectListItem> InvoiceItems
        {
            get { return new SelectList(invoices, "Id", "Value"); }
        }
    
        public InvoiceViewModel(List<Invoice> invoices)
        {
            this.invoices = invoices;
        }
    }

    Create new Invoice.cs|vb and InvoiceViewModel.cs|vb files under Models folder and copy the above code snippets.

  5. And this is how we will fill with data our view model before displaying the view with the viewer. For the purpose open the HomeController.cs|vb file and update the InvoiceParameters method as follows:

    public ActionResult InvoiceParameters()
    {
        var invoices = new List<Invoice>
        {
            new Invoice { Id = 0, Value = "SO51081" },
            new Invoice { Id = 1, Value = "SO51082" },
            new Invoice { Id = 2, Value = "SO51083" },
        };
    
        var items = new InvoiceViewModel(invoices);
        items.SelectedInvoiceId = 1;
    
        return View(items);
    }
  6. Add a custom parameter UI - a dropdown selector with a few values. For the purpose, open the Views/Home/InvoiceParameters.cshtml|vbhtml file and add the following lines in the BODY element, above the HTML5 Viewer:

    @model MyMVCProject.Models.InvoiceViewModel
    <div id="invoiceIdSelector">
      @Html.LabelFor(m => m.SelectedInvoiceId)
      @Html.DropDownListFor(m => m.SelectedInvoiceId, Model.InvoiceItems, new { id = "invoiceId", title = "Select the Invoice ID" })
    </div>
  7. 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:

    @{
        var typeReportSource = new TypeReportSource() { TypeName = typeof(Invoice).AssemblyQualifiedName };
        typeReportSource.Parameters.Add("OrderNumber", Model.SelectedInvoice);
    }
    
    @(
        Html.TelerikReporting().ReportViewer()
            .Id("reportViewer1")
            .ServiceUrl("/api/reports/")
            .TemplateUrl("/ReportViewer/templates/telerikReportViewerTemplate.html")
            .ReportSource(typeReportSource)
            .ViewMode(ViewMode.Interactive)
            .ScaleMode(ScaleMode.Specific)
            .Scale(1.0)
    )
  8. Add code that updates the ReportSource parameters collection with the selected Invoice Id from the dropdown box:

    JavaScript
    $('#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 case, use:
        //viewer.refreshReport();
    });
  9. Run the project and verify that the Invoice Id selection really updates the report.

See Also