Events Overview
In this article, we will go over each of the currently available events, showcasing how to attach an event listener to each one as well as what information will be sent through the event.
Events List
updateUI
The updateUI event will be emitted when the state of the viewer changes.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(updateUI)="updateUI()">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
updateUI() {
console.log("This event handler will be called when the state of the viewer changes.");
};
}
printStarted
The printStarted event will be emitted when the printing starts.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(printStarted)="printStarted($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { PrintStartedEventArgs } from '@progress/telerik-common-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
printStarted(printStartedEventArgs: PrintStartedEventArgs) {
console.log("This event will be emitted when the printing starts.", printStartedEventArgs);
};
}
printDocumentReady
The printDocumentReady event will be emitted after the viewer finishes printing the report.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(printDocumentReady)="printDocumentReady($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { PrintDocumentReadyEventArgs } from '@progress/telerik-common-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
printDocumentReady(printDocumentReadyEventArgs: PrintDocumentReadyEventArgs) {
console.log("This event will be emitted after the viewer finishes printing the report.", printDocumentReadyEventArgs);
};
}
exportStarted
The exportStarted event will be emitted when an export operation is triggered.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(exportStarted)="exportStarted($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { ExportStartedEventArgs } from '@progress/telerik-common-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
exportStarted(exportStartedEventArgs: ExportStartedEventArgs) {
console.log("This event will be emitted when an export operation is triggered.", exportStartedEventArgs);
};
}
exportDocumentReady
The exportDocumentReady event will be emitted after the viewer finishes exporting the report.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(exportDocumentReady)="exportDocumentReady($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { ExportDocumentReadyEventArgs } from '@progress/telerik-common-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
exportDocumentReady(exportDocumentReadyEventArgs: ExportDocumentReadyEventArgs) {
console.log("This event will be emitted after the viewer finishes exporting the report.", exportDocumentReadyEventArgs);
};
}
beforeLoadReport
The beforeLoadReport event will be emitted before the rendering of a report begins.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(beforeLoadReport)="beforeLoadReport()">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
beforeLoadReport() {
console.log("This event will be emitted before the rendering of a report begins.");
};
}
beginLoadReport
The beginLoadReport event will be emitted after the rendering of a report begins.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(beginLoadReport)="beginLoadReport()">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
beginLoadReport() {
console.log("This event will be emitted after the rendering of a report begins.");
};
}
reportLoadProgress
The reportLoadProgress event will be emitted after each successful Get Document Info request until the report rendering is complete.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(reportLoadProgress)="reportLoadProgress($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { DocumentInfo } from '@progress/telerik-common-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
reportLoadProgress(e: DocumentInfo) {
console.log("The e parameter will contain the current information for the report rendering progress.", e);
console.log("This event will be emitted after each successful Get Document Info request until the report rendering is complete.");
};
}
reportLoadComplete
The reportLoadComplete event will be emitted after the rendering of a report ends.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(reportLoadComplete)="reportLoadComplete($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { DocumentInfo } from '@progress/telerik-common-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
reportLoadComplete(e: DocumentInfo) {
console.log("The document information such as the page count, where it has document map, etc. will ve sent via the e object.", e);
console.log("This event will be emitted after the rendering of a report ends.");
};
}
renderingStopped
The renderingStopped event will be emitted when report rendering is cancelled.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(renderingStopped)="renderingStopped()">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
renderingStopped() {
console.log("This event will be emitted when report rendering is cancelled.");
};
}
error
The error event will be emitted when viewer encounters an error.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(error)="error($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
error(e: string) {
console.log("This event will be emitted when viewer encounters an error.");
console.log("The error message", e);
};
}
loadedReportChange
The loadedReportChange event will be emitted when the previewed report is changed or refreshed.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(loadedReportChange)="loadedReportChange()">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
loadedReportChange() {
console.log("This event will be emitted when the loaded report is changed.");
};
}
pageReady
The pageReady event will be emitted when the viewer content has been loaded from the template and is ready to display reports or perform any other operations on it.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(pageReady)="pageReady($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { PageInfo } from '@progress/telerik-common-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
pageReady(e: PageInfo) {
console.log("The current page information such as the page number, the page content, etc.", e)
console.log("This event will be emitted when the viewer content has been loaded from the template and is ready to display reports or perform any other operations on it.");
};
}
navigateToReport
The navigateToReport event will be emitted when the viewer navigates to a new report through the Drillthrough/Navigate To Report Action.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(navigateToReport)="navigateToReport($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
navigateToReport(e: any) {
console.log("The report source object of the newly loaded report", e)
console.log("This event will be emitted when the viewer navigates to a new report through the Drillthrough/Navigate To Report action.");
};
}
currentPageChanged
The currentPageChanged event will be emitted when the viewer changes its currently displayed page.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(currentPageChanged)="currentPageChanged($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { CurrentPageChangedEventArgs } from '@progress/telerik-common-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
currentPageChanged(currentPageChangedEventArgs: CurrentPageChangedEventArgs) {
console.log("The page number and document id.", currentPageChangedEventArgs);
console.log("This event will be emitted when the viewer changes its currently displayed page.");
};
}
interactiveActionEnter
The interactiveActionEnter event will be emitted when the cursor hovers over an interactive action.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(interactiveActionEnter)="interactiveActionEnter($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { PageActionEventArgs } from '@progress/telerik-common-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
interactiveActionEnter(interactiveActionArgs: PageActionEventArgs) {
console.log("The interactive action arguments.", interactiveActionArgs);
console.log("This event will be emitted when the cursor hovers over an interactive action.");
};
}
interactiveActionExecuting
The interactiveActionExecuting event will be emitted before an interactive action is executed.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(interactiveActionExecuting)="interactiveActionExecuting($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { PageActionEventArgs } from '@progress/telerik-common-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
interactiveActionExecuting(pageActionEventArgs: PageActionEventArgs) {
console.log("This event will be emitted before an interactive action is executed.", pageActionEventArgs);
};
}
interactiveActionLeave
The interactiveActionLeave event will be emitted when the cursor leaves the interactive action area.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(interactiveActionLeave)="interactiveActionLeave($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { PageActionEventArgs } from '@progress/telerik-common-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
interactiveActionLeave(interactiveActionArgs: PageActionEventArgs) {
console.log("The interactive action arguments.", interactiveActionArgs);
console.log("This event will be emitted when the cursor leaves the interactive action area.");
};
}
toolTipOpening
The toolTipOpening event will be emitted when a tooltip is opened.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(toolTipOpening)="toolTipOpening($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { TooltipEventArgs } from '@progress/telerik-common-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
toolTipOpening(tooltipEventArgs: TooltipEventArgs) {
console.log("The tooltip arguments.", tooltipEventArgs);
console.log("This event will be emitted when a tooltip is opened.");
};
}
toolTipClosing
The toolTipClosing event will be emitted when a tooltip is closed.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(toolTipClosing)="toolTipClosing($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { TooltipEventArgs } from '@progress/telerik-common-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
toolTipClosing(tooltipEventArgs: TooltipEventArgs) {
console.log("The tooltip arguments.", tooltipEventArgs);
console.log("This event will be emitted when a tooltip is closed.");
};
}
reportVersionMismatch
The reportVersionMismatch event will be emitted when there is a mismatch between the version of the viewer and the reporting service.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(reportVersionMismatch)="reportVersionMismatch()">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
reportVersionMismatch() {
console.log("This event will be emitted when there is mismatch between the version of the viewer and the reporting service.");
};
}
parametersLoaded
The parametersLoaded event will be emitted after the Get Report Parameters is made.
<reporting-angular-viewer
#viewer
[reportSource]="{
report: 'Dashboard.trdx',
parameters: { ReportYear: 2004 }
}"
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
viewMode="interactive"
[keepClientAlive]="true"
(parametersLoaded)="parametersLoaded($event)">
</reporting-angular-viewer>
import { Component, ViewChild } from '@angular/core';
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
import { ReportParameterInfo } from '@progress/telerik-common-report-viewer'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Native Angular Report Viewer Demo';
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
parametersLoaded(e: ReportParameterInfo[]) {
console.log("An array of the parameter values is sent via the event object.", e);
console.log("This event will be emitted after the Get Report Parameters request is made.");
};
}