Loading Reports in JSViewer

In This Topic

This topic provides you the code snippets for loading a report in JSViewer in different JavaScript frameworks.

PureJS

Index.cshtml	Copy Code
var viewer = new GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host' }); viewer.openReport("DemoReport.rdlx");

Angular

app.component.ts	Copy Code
export class AppComponent implements AfterViewInit { title = "app"; viewer: any; ngAfterViewInit() { this.viewer = new GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host' }); this.viewer.openReport("DemoReport.rdlx"); } }

app.component.ts

Copy Code

export class AppComponent implements AfterViewInit {
      title = "app";
      viewer: any;
       ngAfterViewInit() {
           this.viewer = new GrapeCity.ActiveReports.JSViewer.create({
              element: '#viewer-host'
           });
           this.viewer.openReport("DemoReport.rdlx");
       }
}

React

App.js	Copy Code
export default class app extends Component { GrapeCity: any; constructor(props) { super(props); } componentDidMount() { this.viewer = window.GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host', reportID: DemoReport.rdlx' }); } componentDidUpdate() { this.viewer.openReport("DemoReport.rdlx"); } }

App.js

Copy Code

export default class app extends Component {
    GrapeCity: any;
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        this.viewer = window.GrapeCity.ActiveReports.JSViewer.create({
            element: '#viewer-host',
            reportID: DemoReport.rdlx'
        });
    }
    componentDidUpdate() {
        this.viewer.openReport("DemoReport.rdlx");
    }
}

VueJS

App.vue	Copy Code
export default { name: 'app', mounted() { this.viewer = new GrapeCity.ActiveReports.JSViewer.create({ element: '#viewer-host' }); this.viewer.openReport("DemoReport.rdlx"); } }

To load the most updated version of the report in the viewer, use the Refresh button.

Product Support Forum | Print this page