Articles in this section
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.

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

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

image.png

  1. 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;
       }
   }

image.png

The main report will render with the embedded subreport.

image.png

You can download the sample application from here.

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied