This is a migrated thread and some comments may be shown as answers.

HTML Report Viewer Angular Event handler

5 Answers 119 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Bob
Top achievements
Rank 1
Bob asked on 01 Mar 2018, 11:17 PM

I have a report being rendered in an Angular component using the HTML report viewer. I want to display some additional information once the report has finished rendering - so I'm binding to the renderingEnd event of the viewer.

My problem is that I can't access the properties of component from within the callback function. "this" refers to the report viewer itself. Can you please point me in the direction to access the component's properties?

Thanks in advance.

Bob

 

 

5 Answers, 1 is accepted

Sort by
0
Nasko
Telerik team
answered on 06 Mar 2018, 12:57 PM
Hello Bob,

Which version of Angular is used in your application?

Please share some code snippets, so we can get a better idea of what is going on in the app.

Regards,
Nasko
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Bob
Top achievements
Rank 1
answered on 06 Mar 2018, 03:39 PM

Hi Nasko,

I'm running Angular v5.2.1

Template:

<tr-viewer #viewer1 id="reportViewer"
[containerStyle] = 'reportViewerStyle'
[serviceUrl] = 'serviceUrl'
[viewMode] = 'INTERACTIVE'
[scaleMode] = 'SPECIFIC'
[scale] = "1.0"
[renderingEnd] = "reportRendered" >
</tr-viewer>  

<div *ngIf="showDiv">Show this div</div>

 

Component:

export class MyComponent{

private showDiv = false;

function reportRendered(e: any, args: any) {

this.showDiv = true  <==== this.showDiv is undefined. "this" is pointing to the reportViewer object. What's the best way to access the MyComponent's property?

}

 

}

 

0
Bob
Top achievements
Rank 1
answered on 06 Mar 2018, 03:43 PM

Minor correction:

function reportRendered(e: any, args: any)

is actually just

reportRendered(e:any, args:any)

 

0
Accepted
Nasko
Telerik team
answered on 07 Mar 2018, 02:14 PM
Hello Bob,

Inside report viewer events the this object will point to the report viewer object which is why showDiv is undefined in your example.

It is possible to change the scope of the function to the MyComponent scope as shown in the following example:

Template:
<div *ngIf="showDiv">Report has been rendered!</div>
<tr-viewer #viewer1
    [containerStyle]="viewerContainerStyle"
    [serviceUrl]="serviceUrl"
    [reportSource]="reportSource"
    [viewMode]="'INTERACTIVE'"
    [scaleMode]="'SPECIFIC'"
    [scale]="1.0"
    [renderingEnd]="boundReportRendered">
</tr-viewer>

Component:
import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public boundReportRendered: Function;
  showDiv = false;
  title = "Report Viewer";
  viewerContainerStyle = {
    position: 'relative',
    width: '1000px',
    height: '800px',
    ['font-family']: 'ms sans serif'
  };
 
  public ngOnInit(){
    this.boundReportRendered = this.reportRendered.bind(this);
  }
 
  reportRendered(e: any, args: any) {
    this.showDiv = true;
  }
}


Regards,
Nasko
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Bob
Top achievements
Rank 1
answered on 07 Mar 2018, 10:45 PM

Nasko,

Thanks for the code snippets - this worked perfectly. I knew it had something to do with the binding, but I just couldn't get all of parts working correctly. Thanks for guidance! I really appreciate it.

Bob

 

Tags
General Discussions
Asked by
Bob
Top achievements
Rank 1
Answers by
Nasko
Telerik team
Bob
Top achievements
Rank 1
Share this question
or