Skip to content

Commit 4f18cb3

Browse files
mzanevCopilot
mzanev
and
Copilot
authored
chore: updated the Native Angular Report Viewer Events article (#1886)
* chore: updated the Native Angular Report Viewer Events article * Update embedding-reports/display-reports-in-applications/web-application/native-angular-report-viewer/api-reference/events.md Co-authored-by: Copilot <[email protected]> * Update embedding-reports/display-reports-in-applications/web-application/native-angular-report-viewer/api-reference/events.md Co-authored-by: Copilot <[email protected]> * Update embedding-reports/display-reports-in-applications/web-application/native-angular-report-viewer/api-reference/events.md Co-authored-by: Copilot <[email protected]> * Update embedding-reports/display-reports-in-applications/web-application/native-angular-report-viewer/api-reference/events.md Co-authored-by: Copilot <[email protected]> * Update embedding-reports/display-reports-in-applications/web-application/native-angular-report-viewer/api-reference/events.md Co-authored-by: Copilot <[email protected]> * Update embedding-reports/display-reports-in-applications/web-application/native-angular-report-viewer/api-reference/events.md Co-authored-by: Copilot <[email protected]> * Update embedding-reports/display-reports-in-applications/web-application/native-angular-report-viewer/api-reference/events.md Co-authored-by: Copilot <[email protected]> * Update embedding-reports/display-reports-in-applications/web-application/native-angular-report-viewer/api-reference/events.md Co-authored-by: Copilot <[email protected]> * Update embedding-reports/display-reports-in-applications/web-application/native-angular-report-viewer/api-reference/events.md Co-authored-by: Copilot <[email protected]> * Update embedding-reports/display-reports-in-applications/web-application/native-angular-report-viewer/api-reference/events.md Co-authored-by: Copilot <[email protected]> --------- Co-authored-by: Copilot <[email protected]>
1 parent 5bf27ef commit 4f18cb3

File tree

1 file changed

+190
-20
lines changed
  • embedding-reports/display-reports-in-applications/web-application/native-angular-report-viewer/api-reference

1 file changed

+190
-20
lines changed

‎embedding-reports/display-reports-in-applications/web-application/native-angular-report-viewer/api-reference/events.md‎

Lines changed: 190 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -77,12 +77,13 @@ The `printStarted` event will be emitted when the printing starts.
7777
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
7878
viewMode="interactive"
7979
[keepClientAlive]="true"
80-
(printStarted)="printStarted()">
80+
(printStarted)="printStarted($event)">
8181
</reporting-angular-viewer>
8282
````
8383
````TypeScript
8484
import { Component, ViewChild } from '@angular/core';
8585
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
86+
import { PrintStartedEventArgs } from '@progress/telerik-common-report-viewer'
8687

8788
@Component({
8889
selector: 'app-root',
@@ -95,8 +96,8 @@ import { ReportingAngularViewerComponent } from '@progress/telerik-angular-nativ
9596

9697
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
9798

98-
printStarted() {
99-
console.log("This event will be emitted when the printing starts.");
99+
printStarted(printStartedEventArgs: PrintStartedEventArgs) {
100+
console.log("This event will be emitted when the printing starts.", printStartedEventArgs);
100101
};
101102
}
102103
````
@@ -116,12 +117,13 @@ The `printDocumentReady` event will be emitted after the viewer finishes printin
116117
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
117118
viewMode="interactive"
118119
[keepClientAlive]="true"
119-
(printDocumentReady)="printDocumentReady()">
120+
(printDocumentReady)="printDocumentReady($event)">
120121
</reporting-angular-viewer>
121122
````
122123
````TypeScript
123124
import { Component, ViewChild } from '@angular/core';
124125
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
126+
import { PrintDocumentReadyEventArgs } from '@progress/telerik-common-report-viewer'
125127

126128
@Component({
127129
selector: 'app-root',
@@ -134,8 +136,8 @@ import { ReportingAngularViewerComponent } from '@progress/telerik-angular-nativ
134136

135137
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
136138

137-
printDocumentReady() {
138-
console.log("This event will be emitted after the viewer finishes printing the report.");
139+
printDocumentReady(printDocumentReadyEventArgs: PrintDocumentReadyEventArgs) {
140+
console.log("This event will be emitted after the viewer finishes printing the report.", printDocumentReadyEventArgs);
139141
};
140142
}
141143
````
@@ -155,12 +157,13 @@ The `exportStarted` event will be emitted when an export operation is triggered.
155157
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
156158
viewMode="interactive"
157159
[keepClientAlive]="true"
158-
(exportStarted)="exportStarted()">
160+
(exportStarted)="exportStarted($event)">
159161
</reporting-angular-viewer>
160162
````
161163
````TypeScript
162164
import { Component, ViewChild } from '@angular/core';
163165
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
166+
import { ExportStartedEventArgs } from '@progress/telerik-common-report-viewer'
164167

165168
@Component({
166169
selector: 'app-root',
@@ -173,9 +176,9 @@ import { ReportingAngularViewerComponent } from '@progress/telerik-angular-nativ
173176

174177
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
175178

176-
exportStarted() {
177-
console.log("This event will be emitted when an export operation is triggered.");
178-
};
179+
exportStarted(exportStartedEventArgs: ExportStartedEventArgs) {
180+
console.log("This event will be emitted when an export operation is triggered.", exportStartedEventArgs);
181+
};
179182
}
180183
````
181184

@@ -194,12 +197,13 @@ The `exportDocumentReady` event will be emitted after the viewer finishes export
194197
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
195198
viewMode="interactive"
196199
[keepClientAlive]="true"
197-
(exportDocumentReady)="exportDocumentReady()">
200+
(exportDocumentReady)="exportDocumentReady($event)">
198201
</reporting-angular-viewer>
199202
````
200203
````TypeScript
201204
import { Component, ViewChild } from '@angular/core';
202205
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
206+
import { ExportDocumentReadyEventArgs } from '@progress/telerik-common-report-viewer'
203207

204208
@Component({
205209
selector: 'app-root',
@@ -212,9 +216,9 @@ import { ReportingAngularViewerComponent } from '@progress/telerik-angular-nativ
212216

213217
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
214218

215-
exportDocumentReady() {
216-
console.log("This event will be emitted after the viewer finishes exporting the report.");
217-
};
219+
exportDocumentReady(exportDocumentReadyEventArgs: ExportDocumentReadyEventArgs) {
220+
console.log("This event will be emitted after the viewer finishes exporting the report.", exportDocumentReadyEventArgs);
221+
};
218222
}
219223
````
220224

@@ -597,6 +601,48 @@ The `currentPageChanged` event will be emitted when the viewer changes its curre
597601
````TypeScript
598602
import { Component, ViewChild } from '@angular/core';
599603
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
604+
import { CurrentPageChangedEventArgs } from '@progress/telerik-common-report-viewer'
605+
606+
@Component({
607+
selector: 'app-root',
608+
templateUrl: './app.component.html',
609+
styleUrls: ['./app.component.scss']
610+
})
611+
612+
export class AppComponent {
613+
title = 'Native Angular Report Viewer Demo';
614+
615+
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
616+
617+
currentPageChanged(currentPageChangedEventArgs: CurrentPageChangedEventArgs) {
618+
console.log("The page number and document id.", currentPageChangedEventArgs);
619+
console.log("This event will be emitted when the viewer changes its currently displayed page.");
620+
};
621+
}
622+
````
623+
624+
625+
### interactiveActionEnter
626+
627+
The `interactiveActionEnter` event will be emitted when the cursor hovers over an interactive action.
628+
629+
````HTML
630+
<reporting-angular-viewer
631+
#viewer
632+
[reportSource]="{
633+
report: 'Dashboard.trdx',
634+
parameters: { ReportYear: 2004 }
635+
}"
636+
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
637+
viewMode="interactive"
638+
[keepClientAlive]="true"
639+
(interactiveActionEnter)="interactiveActionEnter($event)">
640+
</reporting-angular-viewer>
641+
````
642+
````TypeScript
643+
import { Component, ViewChild } from '@angular/core';
644+
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
645+
import { PageActionEventArgs } from '@progress/telerik-common-report-viewer'
600646

601647
@Component({
602648
selector: 'app-root',
@@ -609,9 +655,9 @@ import { ReportingAngularViewerComponent } from '@progress/telerik-angular-nativ
609655

610656
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
611657

612-
currentPageChanged(e: { page number, reportDocumentId: string }) {
613-
console.log("The page number and document id", e)
614-
console.log("This event will be emitted when the viewer changes its currently displayed page.");
658+
interactiveActionEnter(interactiveActionArgs: PageActionEventArgs) {
659+
console.log("The interactive action arguments.", interactiveActionArgs);
660+
console.log("This event will be emitted when the cursor hovers over an interactive action.");
615661
};
616662
}
617663
````
@@ -631,12 +677,135 @@ The `interactiveActionExecuting` event will be emitted before an interactive act
631677
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
632678
viewMode="interactive"
633679
[keepClientAlive]="true"
634-
(interactiveActionExecuting)="interactiveActionExecuting()">
680+
(interactiveActionExecuting)="interactiveActionExecuting($event)">
681+
</reporting-angular-viewer>
682+
````
683+
````TypeScript
684+
import { Component, ViewChild } from '@angular/core';
685+
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
686+
import { PageActionEventArgs } from '@progress/telerik-common-report-viewer'
687+
688+
@Component({
689+
selector: 'app-root',
690+
templateUrl: './app.component.html',
691+
styleUrls: ['./app.component.scss']
692+
})
693+
694+
export class AppComponent {
695+
title = 'Native Angular Report Viewer Demo';
696+
697+
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
698+
699+
interactiveActionExecuting(pageActionEventArgs: PageActionEventArgs) {
700+
console.log("This event will be emitted before an interactive action is executed.", pageActionEventArgs);
701+
};
702+
}
703+
````
704+
705+
706+
### interactiveActionLeave
707+
708+
The `interactiveActionLeave` event will be emitted when the cursor leaves the interactive action area.
709+
710+
````HTML
711+
<reporting-angular-viewer
712+
#viewer
713+
[reportSource]="{
714+
report: 'Dashboard.trdx',
715+
parameters: { ReportYear: 2004 }
716+
}"
717+
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
718+
viewMode="interactive"
719+
[keepClientAlive]="true"
720+
(interactiveActionLeave)="interactiveActionLeave($event)">
721+
</reporting-angular-viewer>
722+
````
723+
````TypeScript
724+
import { Component, ViewChild } from '@angular/core';
725+
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
726+
import { PageActionEventArgs } from '@progress/telerik-common-report-viewer'
727+
728+
@Component({
729+
selector: 'app-root',
730+
templateUrl: './app.component.html',
731+
styleUrls: ['./app.component.scss']
732+
})
733+
734+
export class AppComponent {
735+
title = 'Native Angular Report Viewer Demo';
736+
737+
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
738+
739+
interactiveActionLeave(interactiveActionArgs: PageActionEventArgs) {
740+
console.log("The interactive action arguments.", interactiveActionArgs);
741+
console.log("This event will be emitted when the cursor leaves the interactive action area.");
742+
};
743+
}
744+
````
745+
746+
747+
### toolTipOpening
748+
749+
The `toolTipOpening` event will be emitted when a tooltip is opened.
750+
751+
````HTML
752+
<reporting-angular-viewer
753+
#viewer
754+
[reportSource]="{
755+
report: 'Dashboard.trdx',
756+
parameters: { ReportYear: 2004 }
757+
}"
758+
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
759+
viewMode="interactive"
760+
[keepClientAlive]="true"
761+
(toolTipOpening)="toolTipOpening($event)">
762+
</reporting-angular-viewer>
763+
````
764+
````TypeScript
765+
import { Component, ViewChild } from '@angular/core';
766+
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
767+
import { TooltipEventArgs } from '@progress/telerik-common-report-viewer'
768+
769+
@Component({
770+
selector: 'app-root',
771+
templateUrl: './app.component.html',
772+
styleUrls: ['./app.component.scss']
773+
})
774+
775+
export class AppComponent {
776+
title = 'Native Angular Report Viewer Demo';
777+
778+
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
779+
780+
toolTipOpening(tooltipEventArgs: TooltipEventArgs) {
781+
console.log("The tooltip arguments.", tooltipEventArgs);
782+
console.log("This event will be emitted when a tooltip is opened.");
783+
};
784+
}
785+
````
786+
787+
788+
### toolTipClosing
789+
790+
The `toolTipClosing` event will be emitted when a tooltip is closed.
791+
792+
````HTML
793+
<reporting-angular-viewer
794+
#viewer
795+
[reportSource]="{
796+
report: 'Dashboard.trdx',
797+
parameters: { ReportYear: 2004 }
798+
}"
799+
[serviceUrl]="'https://demos.telerik.com/reporting/api/reports'"
800+
viewMode="interactive"
801+
[keepClientAlive]="true"
802+
(toolTipClosing)="toolTipClosing($event)">
635803
</reporting-angular-viewer>
636804
````
637805
````TypeScript
638806
import { Component, ViewChild } from '@angular/core';
639807
import { ReportingAngularViewerComponent } from '@progress/telerik-angular-native-report-viewer'
808+
import { TooltipEventArgs } from '@progress/telerik-common-report-viewer'
640809

641810
@Component({
642811
selector: 'app-root',
@@ -649,8 +818,9 @@ import { ReportingAngularViewerComponent } from '@progress/telerik-angular-nativ
649818

650819
@ViewChild('viewer') public viewer!: ReportingAngularViewerComponent;
651820

652-
interactiveActionExecuting() {
653-
console.log("This event will be emitted before an interactive action is executed.");
821+
toolTipClosing(tooltipEventArgs: TooltipEventArgs) {
822+
console.log("The tooltip arguments.", tooltipEventArgs);
823+
console.log("This event will be emitted when a tooltip is closed.");
654824
};
655825
}
656826
````

0 commit comments

Comments
 (0)