Dynamically Selecting and Filtering Reports in Blazor Projects
Environment
Product | Progress® Telerik® Reporting |
Report Viewer | Blazor Report Viewer |
Description
The Telerik Report Viewer makes it easy to let your user select and filter the data of a report to get only the information they need. Out of the box, we implement the report parameter controls in the report viewer which allow you to do this, however, there are times where one may wish to use controls outside of the report viewer widget since it supports only a limited type of report parameter controls out of the box.
For this example, we will use the Invoice
report that we ship with installation of the Telerik Reporting product. That report, and the other example reports, can be found in the installation directory. For example: {install_dir}/Report Designer/Examples
.
Also, instead of setting up a new project with the Blazor Report Viewer, we can use the demo Blazor projects that we also ship with the product installation.
For example: {install_dir}/Examples/(CSharp/VB)
.
The Blazor projects are available in the .NET Core project folders. The next steps can be done in the Index.razor
file of any of our Blazor demo projects.
Solution
Add the following code inside the Index.razor
file:
<div id="invoiceIdSelector">
<label for="invoiceId">Invoices</label>
<select name="invoiceId" title="Select the Invoice ID" @onchange="(args) => changeId(args)">
<option value="SO51081" selected="selected">SO51081</option>
<option value="SO51082">SO51082</option>
<option value="SO51083">SO51083</option>
</select>
</div>
This is a simple select control because the idea is to demonstrate how to update the report from outside the report viewer and the core of this approach is inside the changeId
method. The method should work with virtually any control out there. The changeId
method itself is the following:
async void changeId(ChangeEventArgs e)
{
ReportSourceOptions rso = await reportViewer1.GetReportSourceAsync();
rso.Parameters["OrderNumber"] = e.Value;
await reportViewer1.SetReportSourceAsync(rso);
}
In the changeId
method we retrieve the viewer's ReportSourceOptions
object and then we set the OrderNumber
parameter the value currently present in the event argument. Finally we update the ReportSourceOptions through the viewer's SetReportSourceAsync(ReportSourceOptions opt)
method.
See Also
Dynamically Selecting and Filtering Reports with Blazor and the Telerik ReportViewer Control
Demo Application
The demo can be found in our GitHub repository