Search code examples
javascriptangularreportreportingstimulsoft

Crashed Stimulsoft Report Viewer

I'm using Stimulsoft in an Angular 5 Project, first I created a button (inside bootstrap tabs ), and on click, it triggers a function to generate the reportenter image description here

and the button html code:

 <ngb-tab>
   <ng-template ngbTabTitle ><b>Report</b></ng-template>
    <ng-template ngbTabContent>

        <button (click)="generateReport()"  class="btn m-btn btn-danger" 
           id="generateReport">
            <span>
               <i class="la la-eye"></i>
            <span> Generate Report</span>
          </span>
        </button>   
        <div id="Report"></div>

    </ng-template>
 </ngb-tab>

and the function to be triggered by clicking (Generate Report):

generateReport() {

    this.ExportImageForReport();
    let sol = this.solution;

    setTimeout(() => {
            let HS = this.body.hotStreams.map(a => { let obj = { Name: a.name, 
                   Supply: a.Supply, Target: a.Target, Duty: Math.round((a.Duty 
                 / 1000000) * 10) / 10 }; return obj });
            let CS = this.body.coldStreams.map(a => { let obj = { Name: a.name, 
                   Supply: a.Supply, Target: a.Target, Duty: Math.round((a.Duty 
                / 1000000) * 10) / 10 }; return obj });


            let Solution = {
                Results: {
                    IntervalTemp: sol.IntervalTemp,
                    HotInterval: sol.HotIntervalTemp,
                    ColdInterval: sol.ColdIntervalTemp,
                    HotDuty: Math.round((sol.Qhot / 1000000) * 10) / 10,
                    ColdDuty: Math.round((sol.Qcold / 1000000) * 10) / 10,
                },
                Units: {
                    temperature: this.Units.temperature,
                    duty: this.Units.duty
                },
                HotStreams: HS,
                ColdStreams: CS,
                Diagrams: {
                    HT_Diagram: this.HT_img,
                    GCC_Diagram: this.GCC_img,
                    Grid_Diagram: this.Grid_img,
                },
                UserData: {
                    username:this.username,
                    email:this.email
                }
            }

            fileName = "ByStreamReport"
            let report = new Stimulsoft.Report.StiReport();
            report.loadFile("./assets/stimulsoft/name.mrt");

            let dataSet = new Stimulsoft.System.Data.DataSet("Solution");
            dataSet.readJson(Solution);
            report.regData("Solution", "Solution", dataSet);

            let options = new Stimulsoft.Viewer.StiViewerOptions;
            let viewer = new Stimulsoft.Viewer.StiViewer(options);
            viewer.report = report;
            viewer.renderHtml("Report");

    },6000)
 }

after that the report viewer is opened in a new browser tab not inside the bootstrap tab like it was supposed to be, and the browser is crashed like what is shown in the photo below with two menus appearing at the top and at the button, when I Export the report as pdf, everything is fine and all data are in its place,

enter image description here What I want is that the report viewer to be loaded below the (Generate report) like its place in the html code suppose.

Please till me if you see my post missing an information and I will edit it right away.

Solution

  • The only issue that I was creating an instance of report and option after button click and that caused the viewer to crash,

    it is solved by just creating the instances of report and viewer as a property in the class 

      export class SolutionComponent implements OnInit {

         viewer: any = new Stimulsoft.Viewer.StiViewer(null, 'StiViewer', false);
         report: any = new Stimulsoft.Report.StiReport();

         generateReport() { 
           // the rest of the code 
         }

    and now it is working fine inside the page and the tab

    enter image description here