HTML Report Viewer Angular Event handler

6 posts, 1 answers
  1. Bob
    Bob avatar
    12 posts
    Member since:
    Jul 2010

    Posted 01 Mar 2018 Link to this post

    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

     

     

  2. Nasko
    Admin
    Nasko avatar
    1070 posts

    Posted 06 Mar 2018 Link to this post

    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
  3. Bob
    Bob avatar
    12 posts
    Member since:
    Jul 2010

    Posted 06 Mar 2018 in reply to Nasko Link to this post

    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?

    }

     

    }

     

  4. Bob
    Bob avatar
    12 posts
    Member since:
    Jul 2010

    Posted 06 Mar 2018 in reply to Bob Link to this post

    Minor correction:

    function reportRendered(e: any, args: any)

    is actually just

    reportRendered(e:any, args:any)

     

  5. Answer
    Nasko
    Admin
    Nasko avatar
    1070 posts

    Posted 07 Mar 2018 Link to this post

    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
  6. Bob
    Bob avatar
    12 posts
    Member since:
    Jul 2010

    Posted 07 Mar 2018 in reply to Nasko Link to this post

    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

     

Back to Top