How to load SubReport in Syncfusion Angular Report Viewer

Syncfusion Angular ReportViewer allows you to render reports, which are embedded with one another using the subreport report item. The following steps help you to load the RDLC report with subreport item in a Report Viewer:

1. Create simple Angular ReportViewer application with the help of getting started documentation.
2. Create a simple Web API report controller application with help of following link.
3. Right-click the Web API report controller project and go to the Add New Item dialog. In the dialog, select Report Wizard and name it as MainReport.rdlc for the report, and then click Add.
4. Repeat the step_3 to add a subreport and name it SubReport.rdlc.
5. Right-click the subreport, and then click Subreport Properties.
6. As per RDL standards, you can set the SubReport Path and properties like Microsoft ReportViewer as follows. In the Subreport Properties dialog box, type a name in the Name text box. The name must be unique within the report.

7. You can pass the data source values to the OnReportLoaded method of subreport as shown in the following example.

   public void OnInitReportOptions(ReportViewerOptions reportOption)
   {
   string basePath = _hostingEnvironment.WebRootPath;
    
   if (reportOption.SubReportModel != null)
   {
   FileStream SubStream = new FileStream(basePath + @"\ReportData\SubReport.rdlc", FileMode.Open, FileAccess.Read);
   reportOption.SubReportModel.Stream = SubStream;
   }
   else
   {
   FileStream inputStream = new FileStream(basePath + @"\ReportData\MainReport.rdlc", FileMode.Open, FileAccess.Read);
   reportOption.ReportModel.Stream = inputStream;
   }
    
   reportOption.ReportModel.ProcessingMode = Syncfusion.EJ.ReportViewer.ProcessingMode.Local;
   }
    
   public void OnReportLoaded(ReportViewerOptions reportOption)
   {
   if (reportOption.SubReportModel != null)
   {
   reportOption.SubReportModel.DataSources.Add(new ReportDataSource { Name = "StoreSales", Value = StoreSales.GetData() });
   }
   else
   {
   reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "TopSalesPerson", Value = SalesPersons.GetTopSalesPerson() });
   }
   }
   

List of supported properties of SubReport:

The ReportViewer has the following subreport properties to set the DataSources, Parameters, and more through code behind.

Run the Application:

Run the sample application. You can see the RDLC subreport loaded in the ReportViewer as shown in the following screenshot.

Click here to download the Web API report controller sample.

Click here to download the Angular report viewer sample.