Render subreport

To render a subreport in the Bold Reports® Angular Report Viewer, add the main report and subreport to your application and load them through the Web API service. A subreport displays another report inside the body of the main report. The following steps help you customize the subreport properties such as data source, report path, and parameters.

To learn how to render a Subreport in an Angular application, you can watch this video:

  • Add the subreport and main reports to your application App_Data folder. In this tutorial, the already created reports are used. Refer to the Create RDL Report or Create RDLC Report section.

    Download the Side_By_SideMainReport.rdl and Side_By_SideSubReport.rdl reports from the subreport sample reports download. You can add the report from the Bold Reports® installation location. For more information, refer to Samples and demos. The reports used from the installed location require the NorthwindIO_Reports.sdf database to run, so add the database to your application.

  • Set the reportPath and reportServiceUrl properties of the Report Viewer as in the following code snippet:

<bold-reportviewer id="reportViewer_Control" [reportServiceUrl] = "serviceUrl" [processingMode] = "Remote" [reportServerUrl] = "serverUrl" [reportPath] = "reportPath">
</bold-reportviewer>
import { Component } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'src/reportviewer/reportviewer.component.html',
    styleUrls: ['src/reportviewer/reportviewer.component.css']
})

export class ReportViewerComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
        this.reportPath = 'Side_By_SideMainReport.rdl';
    }
}
  • Build and run the application.

How do I change the subreport path?

To change the subreport file path in the Angular Report Viewer, set the ReportPath property of SubReportModel in the OnInitReportOptions method.

        [NonAction]
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            if (reportOption.SubReportModel != null)
            {
                reportOption.SubReportModel.ReportPath = System.Web.Hosting.HostingEnvironment.MapPath(@"~/App_Data/" + reportOption.SubReportModel.ReportPath);
            }
        }

How do I set a subreport parameter?

To change the parameter default values of a subreport in the Angular Report Viewer, set them in the OnReportLoaded method of the Web API Controller, as in the following code snippet:

        [NonAction]
        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
            if (reportOption.SubReportModel != null)
            {
                reportOption.SubReportModel.Parameters = new BoldReports.Web.ReportParameterInfoCollection();
                reportOption.SubReportModel.Parameters.Add(new BoldReports.Web.ReportParameterInfo()
                {
                    Name = "SalesPersonID",
                    Values = new List<string>() { "2" }
                });
            }
        }

How do I modify the subreport data source connection string?

To change the credential and connection information of the data sources used in a subreport, use the SubReportModel in the Angular Report Viewer OnInitReportOptions method.

        [NonAction]
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            if (reportOption.SubReportModel != null)
            {
                reportOption.SubReportModel.DataSourceCredentials = new List<BoldReports.Web.DataSourceCredentials>();
                reportOption.SubReportModel.DataSourceCredentials.Add(new BoldReports.Web.DataSourceCredentials("<database>", "Data Source=<instancename>;Initial Catalog=<database>;user id=<username>;password=<password>"));
            }
        }

How do I set a subreport data source?

To set the data source of an RDLC subreport in the Angular Report Viewer, set the ReportDataSource property in the OnReportLoaded method. You can bind a local business object data source collection only for RDLC reports.

An RDL report has the connection information in the report definition itself, so you do not need to bind a data source.

  1. Add the RDLC subreport and main reports to your application App_Data folder. You can download the Product List reports.
  2. Set the reportPath and reportServiceUrl properties of the Report Viewer as in the following code snippet:
<bold-reportviewer id="reportViewer_Control" [reportServiceUrl] = "serviceUrl" [processingMode] = "Local" [reportServerUrl] = "serverUrl" [reportPath] = "reportPath">
</bold-reportviewer>
import { Component } from '@angular/core';

@Component({
    selector: 'ej-app',
    templateUrl: 'src/reportviewer/reportviewer.component.html',
    styleUrls: ['src/reportviewer/reportviewer.component.css']
})

export class ReportViewerComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
        this.reportPath = 'Product List Main.rdlc';
    }
}

  • Create a class and methods that returns business object data collection. Use the following code in your application Web API Service.

    public class ProductList
{
    public string ProductName { get; set; }
    public string OrderId { get; set; }
    public double Price { get; set; }
    public string Category { get; set; }
    public string Ingredients { get; set; }
    public string ProductImage { get; set; }

    public static IList GetData()
    {
        List<ProductList> datas = new List<ProductList>();
        ProductList data = null;
        data = new ProductList()
        {
            ProductName = "Baked Chicken and Cheese",
            OrderId = "323B60",
            Price = 55,
            Category = "Non-Veg",
            Ingredients = "grilled chicken, corn and olives.",
            ProductImage = ""
        };
        datas.Add(data);
        data = new ProductList()
        {
            ProductName = "Chicken Delite",
            OrderId = "323B61",
            Price = 100,
            Category = "Non-Veg",
            Ingredients = "cheese, chicken chunks, onions & pineapple chunks.",
            ProductImage = ""
        };
        datas.Add(data);
        data = new ProductList()
        {
            ProductName = "Chicken Tikka",
            OrderId = "323B62",
            Price = 64,
            Category = "Non-Veg",
            Ingredients = "onions, grilled chicken, chicken salami & tomatoes.",
            ProductImage = ""
        };
        datas.Add(data);

        return datas;
    }
}

  • Bind the business object data values collection to subreport by adding a new item to the DataSources, as in the following code snippet:

        [NonAction]
    public void OnReportLoaded(ReportViewerOptions reportOption)
    {
        //Assigning the data source for 'Product List.rdlc'
        if (reportOption.SubReportModel != null)
        {
            reportOption.SubReportModel.DataSources = new BoldReports.Web.ReportDataSourceCollection();
            reportOption.SubReportModel.DataSources.Add(new BoldReports.Web.ReportDataSource { Name = "list", Value = ProductList.GetData() });
        }
    }

The data source name is case sensitive and must be the same as in the report definition.

How do I load a subreport as a stream?

To load a subreport as a stream in the Angular Report Viewer, set the Stream property in the OnInitReportOptions method.

        [NonAction]
        public void OnInitReportOptions(ReportViewerOptions reportOption)
        {
            if (reportOption.SubReportModel != null)
            {
                // Opens the report from application App_Data folder using FileStream and loads the sub report stream.
                FileStream reportStream = new FileStream(System.Web.Hosting.HostingEnvironment.MapPath(@"~/App_Data/" + reportOption.SubReportModel.ReportPath), FileMode.Open, FileAccess.Read);
                reportOption.SubReportModel.Stream = reportStream;
            }
        }
        [NonAction]
        public void OnReportLoaded(ReportViewerOptions reportOption)
        {
            //Assigning the data source for 'Product List.rdlc'
            if (reportOption.SubReportModel != null)
            {
                reportOption.SubReportModel.DataSources = new BoldReports.Web.ReportDataSourceCollection();
                reportOption.SubReportModel.DataSources.Add(new BoldReports.Web.ReportDataSource { Name = "list", Value = ProductList.GetData() });
            }
        }