Render RDLC report

To render an RDLC report in the Bold Reports® Angular Report Viewer, load the report from the local file system and bind a JSON array or a custom business object data collection as its data source. The following steps demonstrate how to render an RDLC report with a JSON array and a custom business object data collection.

To learn how to render an RDLC in an Angular application (Client Side), you can watch this video:

To learn how to render an RDLC in an Angular application (Server Side), you can watch this video:

Add the RDLC report product-list.rdlc from the Bold Reports® installation location to your application’s App_Data folder. For more information, refer to Samples and demos.

How do I bind a data source on the client side?

To bind a data source on the client side of the Angular Report Viewer, follow these steps:

  • Set the RDLC report path to the reportPath property.
  • Assign the processingMode property to ProcessingMode.Local.
  • Bind the JSON array collection to the dataSources property as in the following code:
<bold-reportviewer id = "reportViewer_Control"
 [reportServiceUrl] = "serviceUrl"
 [dataSources] = "reportData"
 [reportPath] = "reportPath"
 [processingMode] = "processingMode"
 style = "width: 100%;height: 950px">
</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 reportData: any;
    public processingMode: string;

    constructor() {
        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportViewer';
        this.reportPath = 'product-list.rdlc';
        this.processingMode = "Local";
        this.reportData = [{
      value: [
        {
            ProductName: 'Baked Chicken and Cheese', OrderId: '323B60', Price: 55, Category: 'Non-Veg', Ingredients: 'grilled chicken, corn and olives.', ProductImage: ' '
        },
        {
            ProductName: 'Chicken Delite', OrderId: '323B61', Price: 100, Category: 'Non-Veg', Ingredients: 'cheese, chicken chunks, onions & pineapple chunks.', ProductImage: ' '
        },
        {
            ProductName: 'Chicken Tikka', OrderId: '323B62', Price: 64, Category: 'Non-Veg', Ingredients: 'onions, grilled chicken, chicken salami & tomatoes.', ProductImage: ' '
        }
      ],
      name: 'list'
    }];
    }
}
  • Build and run the application.

Bind data source in Web API controller

The following steps help you configure the Angular Report Viewer Web API controller to render the RDLC report with a business object data collection.

  1. Create a class and methods that return business object data collection. Use the following code in your application’s 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;
    }
}

  2. Set the value of the ProcessingMode property to ProcessingMode.Local and ReportPath in the RDLC report location.

  3. Bind the business object data values collection by adding a new item to the DataSources in the Web API controller, as in the following code snippet:

    [NonAction]
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
    reportOption.ReportModel.ReportPath = System.Web.Hosting.HostingEnvironment.MapPath(@"~/App_Data/Product List.rdlc");
    reportOption.ReportModel.DataSources.Add(new BoldReports.Web.ReportDataSource { Name = "list", Value = ProductList.GetData() });
}

    Here the Name is case sensitive and it should be same as in the data source name in the report definition. The Value accepts IList, DataSet, and DataTable inputs.

How do I load a report as a stream?

To load a report as a stream in the Angular Report Viewer Web API controller, create a report stream using the FileStream class and assign the report stream to the Stream property.

    [NonAction]
    public void OnInitReportOptions(ReportViewerOptions reportOption)
    {
        string filePath = System.Web.Hosting.HostingEnvironment.MapPath(@"~/App_Data/Product List.rdlc"); ;
        // Opens the report from application's App_Data folder using FileStream
        FileStream reportStream = new FileStream(filePath, FileMode.Open, FileAccess.Read);
        reportOption.ReportModel.Stream = reportStream;
        reportOption.ReportModel.DataSources.Add(new BoldReports.Web.ReportDataSource { Name = "list", Value = ProductList.GetData() });
    }

In the previous code, the Product List.rdlc report is loaded from the App_Data folder location.

View report click

You can get the user-selected parameter details when users click the ViewReport button in the Angular Report Viewer parameter block. The viewReportClick event allows you to handle the ViewReport button click on the client side, as in the following code:

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    [locale]= Remote
    (viewReportClick) = "viewReportClick($event)">
</bold-reportviewer>
import { Component, ViewChild } from '@angular/core';
import { BoldReportsAngularModule } from '@boldreports/angular-reporting-components/src/core';

@Component({
    selector: 'ej-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    public serviceUrl: string;
    public reportPath: string;
    public serverUrl: string;

    constructor() {

        this.serviceUrl = 'https://demos.boldreports.com/services/api/ReportApi';
        this.reportPath = 'GroupingAgg.rdl';

    }

    viewReportClick(event) {
        var reportParams = [];
        reportParams.push({ name: 'ReportParameter1', labels: ['SO50756'], values: ['SO50756'] });
        event.model.parameters = reportParams;
    }
}

The model property in the event argument has the details of current processing report model.