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.

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

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.

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

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>

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

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();
});

Run the project and verify that the Invoice Id selection really updates the report.

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

Pass values to report parameters

See Also

Getting Started

Support Resources

Community