Category / Section
Displaying Subreports in a Blazor Application
Published:
Updated:
A subreport is a report that is embedded within the main report. It allows you to display detailed information related to the main report’s data in a separate report area. This feature is particularly useful when you want to provide additional context or display related data without cluttering the main report. The following steps will help you to render a subreport in a Blazor application.
- Add the subreport and main reports to the application’s
wwwroot/Resources
folder. In this knowledge base, the already created reports are used. You can refer to the Create RDL Report section or Create RDLC Report section for detailed instructions.
Download the Side_By_SideMainReport.rdl and Side_By_SideSubReport.rdl reports from here.
- The following code example demonstrates how to load a subreport in the Report Viewer on the client side.
@page "/"
<pagetitle>Index</pagetitle>
@using Microsoft.JSInterop
@using Microsoft.AspNetCore.Components
@inject IJSRuntime JSRuntime
@using BlazorServerNet6.Data;
<div id="report-viewer" style="width: 100%;height: 950px"></div>
@code {
// ReportViewer options
BoldReportViewerOptions viewerOptions = new BoldReportViewerOptions();
// Used to render the Bold Report Viewer component in Blazor page.
public async void RenderReportViewer()
{
viewerOptions.ReportName = "Side_By_SideMainReport.rdl";
viewerOptions.ServiceURL = "/api/BoldReportsAPI";
await JSRuntime.InvokeVoidAsync("BoldReports.RenderViewer", "report-viewer", viewerOptions);
}
// Initial rendering of Bold Report Viewer
protected override void OnAfterRender(bool firstRender)
{
RenderReportViewer();
}
}
- The following code example demonstrates how to load a subreport in a Blazor server application.
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
string basePath = _hostingEnvironment.WebRootPath;
// Here, we have loaded the Side_By_SideSubReport.rdl report from application the folder wwwroot\Resources and loads the sub report stream.
if (reportOption.SubReportModel != null)
{
FileStream inputSubStream = new FileStream(basePath + @"\Resources\"+ reportOption.SubReportModel.ReportPath+".rdl", FileMode.Open, FileAccess.Read);
MemoryStream SubStream = new MemoryStream();
inputSubStream.CopyTo(SubStream);
SubStream.Position = 0;
inputSubStream.Close();
reportOption.SubReportModel.Stream = SubStream;
}
else
{
FileStream inputStream = new FileStream(basePath + @"\Resources\" + reportOption.ReportModel.ReportPath, FileMode.Open, FileAccess.Read);
MemoryStream reportStream = new MemoryStream();
inputStream.CopyTo(reportStream);
reportStream.Position = 0;
inputStream.Close();
reportOption.ReportModel.Stream = reportStream;
}
}
The main report will render with the embedded subreport.
You can download the sample application from here.