Report interaction events

To run custom actions when users interact with a report in the Bold Reports® Angular Report Viewer, handle the following report interaction events.

  • ReportLoaded
  • ReportError
  • ShowError
  • Drill through
  • Hyperlink

Report loaded

The reportLoaded event of the Angular Report Viewer occurs after the report is loaded and ready to start processing. You can handle the event and specify the data source and parameters at client side. The following sample code loads a report by assigning the report data source input in the reportLoaded event.

In this tutorial, the IndicatorReport.rdlc report is used. You can add the report from the Bold Reports® installation location. For more information, refer to Samples and demos.

<bold-reportviewer id="reportViewer_Control" [reportServiceUrl] = "serviceUrl" [processingMode] = "Local" [reportPath] = "reportPath" (reportLoaded) = "reportLoaded($event)">
</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 = 'IndicatorReport.rdlc';
    }

    reportLoaded(event) {
            let desc2013 = [
                        {
                            No: 1, Name: "Carlos Slim", NetWorth: 73.0, Age: 73, CitizenShip: "Mexico", Source: "Telmex,America Movil, Grupo Carso", RankingStatus: 50, ProfitStatus: 75
                        },
                        {
                            No: 2, Name: "Bill Gates", NetWorth: 67.0, Age: 57, CitizenShip: "United States", Source: "Microsoft", RankingStatus: 50, ProfitStatus: 75
                        },
                        {
                            No: 3, Name: "Amancio Ortega", NetWorth: 57.0, Age: 57, CitizenShip: "Spain", Source: "Inditex Group", RankingStatus: 75, ProfitStatus: 75
                        },
                        {
                            No: 4, Name: "Warren Buffett", NetWorth: 53.0, Age: 82, CitizenShip: "United States", Source: "Berkshire Hathaway", RankingStatus: 25, ProfitStatus: 75
                        },
                        {
                            No: 5, Name: "Larry Ellison", NetWorth: 43.0, Age: 68, CitizenShip: "United States", Source: "Oracle Corporation", RankingStatus: 75, ProfitStatus: 75
                        },
                        {
                            No: 6, Name: "Charles Koch", NetWorth: 34.0, Age: 77, CitizenShip: "United States", Source: "Koch Industries", RankingStatus: 75, ProfitStatus: 75
                        },
                        {
                            No: 7, Name: "David Koch", NetWorth: 34.0, Age: 72, CitizenShip: "United States", Source: "Koch Industries", RankingStatus: 75, ProfitStatus: 75
                        },
                        {
                            No: 8, Name: "Li Ka-shing", NetWorth: 32.0, Age: 84, CitizenShip: "Hong Kong/ Canada", Source: "Cheung Kong Holdings", RankingStatus: 75, ProfitStatus: 75
                        },
                        {
                            No: 9, Name: "Liliane Bettencourt", NetWorth: 30.0, Age: 90, CitizenShip: "France", Source: "L'Oreal", RankingStatus: 75, ProfitStatus: 75
                        },
                        {
                            No: 10, Name: "Bernard Arnault", NetWorth: 29.0, Age: 63, CitizenShip: "France", Source: "LVMH Moet Hennessy Louis Vuitton", RankingStatus: 25, ProfitStatus: 25
                        }];

            let desc2012 = [
                        {
                            No: 1, Name: "Carlos Slim", NetWorth: 69.0, Age: 72, CitizenShip: "Mexico", Source: "Telmex,America Movil, Grupo Carso", RankingStatus: 50, ProfitStatus: 25
                        },
                        {
                            No: 2, Name: "Bill Gates", NetWorth: 61.0, Age: 56, CitizenShip: "United States", Source: "Microsoft", RankingStatus: 50, ProfitStatus: 75
                        },
                        {
                            No: 3, Name: "Warren Buffett", NetWorth: 44.0, Age: 81, CitizenShip: "United States", Source: "Berkshire Hathaway", RankingStatus: 50, ProfitStatus: 25
                        },
                        {
                            No: 4, Name: "Bernard Arnault", NetWorth: 41.0, Age: 63, CitizenShip: "France", Source: "LVMH Moet Hennessy Louis Vuitton", RankingStatus: 50, ProfitStatus: 75
                        },
                        {
                            No: 5, Name: "Amancio Ortega", NetWorth: 37.5, Age: 75, CitizenShip: "Spain", Source: "Inditex Group", RankingStatus: 75, ProfitStatus: 75
                        },
                        {
                            No: 6, Name: "Larry Ellison", NetWorth: 36.0, Age: 67, CitizenShip: "United States", Source: "Oracle Corporation", RankingStatus: 25, ProfitStatus: 75
                        },
                        {
                            No: 7, Name: "Eike Batista", NetWorth: 30.0, Age: 55, CitizenShip: "Brazil", Source: "EBX Group", RankingStatus: 75, ProfitStatus: 75
                        },
                        {
                            No: 8, Name: "Stefan Persson", NetWorth: 26.5, Age: 64, CitizenShip: "Sweden", Source: "H&M", RankingStatus: 75, ProfitStatus: 75
                        },
                        {
                            No: 9, Name: "Li Ka-shing", NetWorth: 25.0, Age: 83, CitizenShip: "Hong Kong/ Canada", Source: "Cheung Kong Holdings", RankingStatus: 75, ProfitStatus: 75
                        },
                        {
                            No: 10, Name: "Karl Albrecht", NetWorth: 25.4, Age: 92, CitizenShip: "Germany", Source: "Aldi", RankingStatus: 75, ProfitStatus: 25
                        }];


            let description = [
           {
               Status: 25, Description: "Has not changed from the previous ranking."
           },
           {
               Status: 50, Description: "Has increased from the previous ranking."
           },
           {
               Status: 75, Description: "Has decreased from the previous ranking."
           }];

            event.model.dataSources = [{
                value: ej.DataManager(desc2013).executeLocal(ej.Query()),
                name: "DataSet1"
            }, {
                value: ej.DataManager(desc2012).executeLocal(ej.Query()),
                name: "DataSet2"
            }, {
                value: ej.DataManager(description).executeLocal(ej.Query()),
                name: "DataSet3"
            }];
    }
}

Report error

The Angular Report Viewer raises the reportError event when an error occurs in report processing. You can handle the event and show the details in your custom dialog instead of the default error detail interface.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    (reportError) = "onReportError($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/ReportViewer';
        this.reportPath = 'Sales Order Detail.rdl';
    }

    onReportError(event) {
          alert(event.errmsg);
          event.cancel = true;
    }
}

To suppress the default error dialog, set the cancel argument to true.

Show error

The Angular Report Viewer invokes the showError event whenever users click a report item that contains an error in processing. The event provides detailed information about the cause of the error. You can hide the default dialog and show your customized dialog.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    (showError) = "onShowError($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/ReportViewer';
        this.reportPath = 'Sales Order Detail.rdl';
    }

    onShowError(event) {
        alert("Error code : " + event.errorCode + "\n" +
                    "Error Detail : " + event.errorDetail + "\n" +
                    "Error Message : " + event.errorMessage);
        event.cancel = true;
    }
}

Drill through

The Angular Report Viewer invokes the drillThrough event when a user selects a drill through item in a report. You can change the drill through arguments such as report parameter and data sources. The following sample code can be used to change the drill through report name and set the parameter value before the drill through report is rendered.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    (drillThrough) = "onDrillThrough($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/ReportViewer';
        this.reportPath = 'SalesPersonDetails.rdl';
    }

    onDrillThrough(event) {
        event.actionInfo.ReportName = "PersonalDetails";
        event.actionInfo.Parameters = [{
            name: 'SalesOrderNumber',
            labels: ['SO50751'],
            values: [SO50751],
            nullable: false
            }];
    }
}

The hyperlink event of the Angular Report Viewer occurs when users click a hyperlink in a report, before the hyperlink is followed. The following sample code redirects to a new custom URL and cancels the component default action.

<bold-reportviewer id="reportViewer_Control"
    [reportServiceUrl] = "serviceUrl"
    [processingMode] = "Remote"
    [reportServerUrl] = "serverUrl"
    [reportPath] = "reportPath"
    (hyperlink) = "onHyperLink($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/ReportViewer';
        this.reportPath = 'Customer Support Analysis (Random data).rdl';
    }

    onHyperLink(event) {
        event.cancel = true;
        //You can modify the URL here
        window.open(event.actionInfo.Hyperlink);
    }
}