Tips on saving stimulsoft report js onto a server using Angular

I am working on a report designer component and have assigned a method to the onSaveReport event. However, I am encountering an issue where the member of my component is showing as undefined.

    options: any;
    designer: any;
    public document: ReportDocument;

    reportBody = '';
    constructor() {

    }

    ngOnInit() {
        this.document = new ReportDocument();
        this.options = new Stimulsoft.Designer.StiDesignerOptions();
        this.options.appearance.fullScreenMode = false;

        this.designer = new Stimulsoft.Designer.StiDesigner(this.options, 'StiDesigner', false);
        var report = new Stimulsoft.Report.StiReport();
        var json = { "DataSet": [{ Id: "a", Name: "A" }] }
        var dataSet = new Stimulsoft.System.Data.DataSet("JSON");

        dataSet.readJson(json)
        report.regData("JSON", "JSON", dataSet);

        report.dictionary.synchronize();
        this.designer.report = report;
        this.designer.renderHtml('designer');
        this.designer.onSaveReport = this.onReportSave;
    }

    private onReportSave(e: any) {
        this.document.body = e.report.saveToJsonString(); // error is here
        
    }
}

Here is the error message being shown:

Cannot set properties of undefined (setting 'body') TypeError: Cannot set properties of undefined (setting 'body') at $.onReportSave [as onSaveReport] (http://localhost:4200/features-stimulsoft-report-stimulsoft-report-module.js:1206:28) at $.invokeSaveReport (http://localhost:4200/assets/lazyBundles/stimulsoft/stimulsoft.designer.js:30:82619) at $.raiseCallbackEventAsync (http://localhost:4200/assets/lazyBundles/stimulsoft/stimulsoft.designer.js:30:86029) at http://localhost:4200/assets/lazyBundles/stimulsoft/stimulsoft.designer.js:30:78818 at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:12178:35) at Object.onInvokeTask (http://localhost:4200/vendor.js:72788:33) at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.js:12177:40) at Zone.runTask (http://localhost:4200/polyfills.js:11946:51) at invokeTask (http://localhost:4200/polyfills.js:12259:38) at ZoneTask.invoke (http://localhost:4200/polyfills.js:12248:52)

javascriptangulartypescriptstimulsoft

Answer №1

When passing your function reference to onSaveReport, you lose access to your class this inside the onReportSave function. This is because the designer calls your function using their own context, not that of your class, leading to the error of this.document being undefined. However, you can resolve this issue by using the bind property as shown below:

this.designer.onSaveReport = this.onReportSave.bind(this);

By using bind, you can now ensure that this inside your function refers to the this of your class.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with integrating user input from HTML into a JavaScript file to execute a GET request

I am currently working on a project to create a website that integrates the google books API for users to search for books. To start, I have set up a server using express in index.js at the root of the project directory, and all my static files are stored ...

javascripthtmlexpress

Can Google Maps be initialized asynchronously without the need for a global callback function?

Currently, I am working on developing a reusable drop-in Module that can load Google Maps asynchronously and return a promise. If you want to take a look at the code I have constructed for this using AngularJS, you can find it here. One issue I have enco ...

javascriptangularjsgoogle-mapsgoogle-maps-api-3asynchronous

Issue with Webpack throwing 'window undefined' persists despite using the 'use client' configuration in React/Next.js

I've been using Typescript 5, React 18, and Next.js 14 as my tech stack, and I keep encountering similar errors with various libraries. One of the errors I often face is ReferenceError: window is not defined. This error originates from a third-party ...

javascriptreactjstypescriptwebpacknext.js

Universal HTML form validation with a preference for jQuery

Is there a jQuery plugin available for form validation that follows the most common rules? Specifically, I need to validate based on the following criteria: All textboxes must not be empty If the 'Show License' checkbox is checked, then the &a ...

javascriptjqueryhtmljquery-plugins

Is there a way for me to receive the status code response from my backend server?

My component makes a call to a servlet, which then sends a POST HTTP request to the backend (using Spring Boot). I want the backend to return the status of the POST request that was sent earlier. This is my code: res= this.CS.postcompetenze(this.comp) Th ...

javascripttypescriptspring-bootjpa

Despite element being a grandchild, the function this.wrapperRef.current.contains(element) will return false

The issue arises when using the EditModal component with an onClickOutside event. This component includes a child element, a Material-UI Select, where clicking on a MenuItem triggers the onClickOutside event, causing the modal to close without selecting th ...

javascriptreactjsmaterial-uireact-ref

Attempt to retrieve JSON-formatted data from a repository on Git

As a novice, I am delving into the world of ajax and experimenting with json files. Utilizing JSON formatted data is something I am keen on mastering. However, my request seems to be yielding an empty outcome. An Update: Below is the piece of code I am wor ...

javascriptjsonajaxgithubhttps

Sequential Element Loading using jQuery upon pageload

Can someone please explain how to achieve the effect shown on this website: http://www.getflow.com/ ? I believe that jQuery is being used to gradually adjust the opacity of each element. Is there a simple JavaScript snippet available to load each image e ...

javascriptjquerycss

How is it possible that Firebase is displaying undefined in my component, yet I can clearly view the object in console.log after reading from my database?

Using Next.js and Typescript in my project. I recently created a custom hook to read data from the firebase realtime database, which returns an array of objects. However, I am facing an issue where I am unable to pass this array to my component successful ...

javascriptreactjsfirebase-realtime-databasenext.js

What's the best way to use the keyboard's enter key to mark my to-do list

I'm looking to update my todo list functionality so that pressing enter adds a new todo item, instead of having to click the button. <h1 style="text-align:center">Todo List</h1> <div class="container"> ...

htmlangulartypescript

Updating the main window in Angular after the closure of a popup window

Is it possible in Angular typescript to detect the close event of a popup window and then refresh the parent window? I attempted to achieve this by including the following script in the component that will be loaded onto the popup window, but unfortunatel ...

angulartypescript

When TableRow's onSelectChange is activated, it correctly selects the entire Table Group instead of an

In my React TypeScript application, I am working with an Array of Objects to populate a table. Each table row is grouped by category, and within each row, there is a select box that triggers an event to select all items with the same category: https://i.s ...

javascriptreactjsarraystypescript

Discover which references are yet to be resolved within a tsx file

I have been tasked with developing a custom builder for a web application. The challenge now is to automatically detect imports in the code so that the right modules can be imported. My current solution involves traversing the AST of the scripts, keeping ...

typescriptabstract-syntax-treetsxtypescript-compiler-api

Capturing Vuejs data for various pathways

Currently, I am developing a Vue file that contains the following code: <router-link :to="{name: 'detailed'}" tag='li' @click='getData("test")'> testing</router-link> In the script section, the code looks like th ...

javascripthtmlvue.js

tips for sending a chosen item to the Vujes API

How can I send the selected item from a dropdown to an API in Vue.js? <select :v-model="selectedRole" class="custSelect"> <option v-for="option in options" v-bind:value="option.value"> {{option.role}} </option> ...

javascriptvue.jsconsole

There seems to be an issue with the functionality of chrome.storage.local.set()

Struggling with Chrome storage handling, I have reviewed the newest documentation for Chrome storage and implemented the following code snippet (found within an AJAX call success function, where info.userName is a value fetched from my backend program): ch ...

javascriptgoogle-chromegoogle-chrome-extension

Struggling to access localhost in the browser despite receiving confirmation in the terminal that it is listening on localhost

After successfully creating a new app using angular cli, I launched the server and received the message in the terminal that it is listening on localhost:4200. Please see the image at this https://i.sstatic.net/YprnM.png. However, when I try to access loc ...

angularnpmwindows-7angular-cli

Implementing a post method in Angular without a request body

I've been attempting to send a JSON request and handle the response, but I keep encountering these errors: zone-evergreen.js:2952 OPTIONS http://'api':10050/api/content/Delivery net::ERR_EMPTY_RESPONSE core.js:6014 ERROR HttpErrorResponse ...

angular

Different ways to notify a React/Next.js page that Dark Mode has been switched?

I am in the process of creating my first basic Next.js and Tailwind app. The app includes a fixed header and a sidebar with a button to toggle between dark and light modes. To achieve this, I'm utilizing next-theme along with Tailwind, which has been ...

javascriptreactjsnext.jscytoscape.js

Guide on exporting a submodule within a TypeScript package

My aspiration is to develop a Typescript library that emulates the structure of popular libraries like RxJS and Angular Material, which are divided into submodules. RxJS and Angular exhibit a way to import features using syntax like this: // RxJS import ...

javascripttypescriptecmascript-6