New to Telerik Reporting? Download free 30-day trial

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

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

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. We are going to use one of our demo Visual Studio reports. For this purpose, the demo ReportLibrary project should be built beforehand (see below). Create a new ASP.NET MVC 4+ Empty Project and add reference to [TelerikReporting_InstallDir]\Examples\CSharp|VB\ReportLibrary\bin\[configuration directory]\CSharp|VB.ReportLibrary.dll. The exact [configuration directory] name depends on the project Build configuration. It could be Debug, Release, etc.

  2. 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 '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 InvoiceModel
    {
        public int Id { get; set; }
        public string Value { get; set; }
    }
    
    public class InvoiceViewModel
    {
        readonly List<InvoiceModel> 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<InvoiceModel> invoices)
        {
            this.invoices = invoices;
        }
    }
    
    Public Class InvoiceModel
        Public Property Id() As Integer
            Get
                Return m_Id
            End Get
            Set(value As Integer)
                m_Id = value
            End Set
        End Property
        Private m_Id As Integer
        Public Property Value() As String
            Get
                Return m_Value
            End Get
            Set(value As String)
                m_Value = value
            End Set
        End Property
        Private m_Value As String
    End Class
    
    Public Class InvoiceViewModel
        ReadOnly invoices As List(Of InvoiceModel)
    
        <Display(Name:="Invoices")>
        Public Property SelectedInvoiceId() As Integer
            Get
                Return m_SelectedInvoiceId
            End Get
            Set(value As Integer)
                m_SelectedInvoiceId = value
            End Set
        End Property
    
        Public ReadOnly Property SelectedInvoice() As String
            Get
                Return Me.invoices(Me.SelectedInvoiceId).Value
            End Get
        End Property
    
        Private m_SelectedInvoiceId As Integer
    
        Public ReadOnly Property InvoiceItems() As IEnumerable(Of SelectListItem)
            Get
                Return New SelectList(invoices, "Id", "Value")
            End Get
        End Property
    
        Public Sub New(invoices As List(Of InvoiceModel))
            Me.invoices = invoices
        End Sub
    End Class
    

    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<InvoiceModel>
        {
            new InvoiceModel { Id = 0, Value = "SO51081" },
            new InvoiceModel { Id = 1, Value = "SO51082" },
            new InvoiceModel { Id = 2, Value = "SO51083" },
        };
    
        var items = new InvoiceViewModel(invoices);
        items.SelectedInvoiceId = 1;
    
        return View(items);
    }
    
    Public Function InvoiceParameters() As ActionResult
        Dim invoices = New List(Of InvoiceModel)() From { _
            New InvoiceModel() With { _
                .Id = 0, _
                .Value = "SO51081" _
            }, _
            New InvoiceModel() With { _
                .Id = 1, _
                .Value = "SO51082" _
            }, _
            New InvoiceModel() With { _
                .Id = 2, _
                .Value = "SO51083" _
            } _
        }
    
        Dim items = New InvoiceViewModel(invoices)
        items.SelectedInvoiceId = 1
    
        Return View(items)
    End Function
    
  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>
    
    @ModelType MyMVCProject.InvoiceViewModel
    <div id="invoiceIdSelector">
    @Html.LabelFor(Function(m) m.SelectedInvoiceId)
    @Html.DropDownListFor(Function(m) m.SelectedInvoiceId, Model.InvoiceItems, New With { Key.id = "invoiceId", Key.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)
    )
    
    @Code
        Dim typeReportSource = New TypeReportSource() With {.TypeName = GetType(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)
    End Code
    
  8. Add code that updates the ReportSource parameters collection with the selected Invoice Id from the dropdown box:

    $('#invoiceId').change(function () {
        var viewer = $("#reportViewer1").data("telerik_ReportViewer");
        viewer.reportSource({
            report: viewer.reportSource().report,
            parameters: { OrderNumber: $("#invoiceId :selected").text() }
        });
        //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

In this article