You can handle the report interaction events with reports using the following events.
ReportLoadedReportErrorShowErrorDrill throughHyperlinkThe reportLoaded event occurs after the report is loaded and it is ready to start the 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.rdlcreport 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"
}];
}
}When an error occurs in the report processing, it raises the reportError event. You can handle the event and show the details in your custom dialog instead of component 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.
The showError event is invoked whenever users click a report item that contains an error in processing. It 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;
}
}When a drill through item is selected in a report, it invokes the drillThrough event. 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 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);
}
}