Using Designer Events

Our sample projects and report templates can help you learn the basics of working with our products.
View on GitHub
Products ✖Dashboards.JS ✖Designer ✖Events ✖
The designer raises events for saving, creating, previewing and exiting — bind the ones you need as component events.

In Angular.
import { Component } from "@angular/core";
import { Designer, Stimulsoft } from "stimulsoft-dashboards-js-angular/designer";

@Component({
    imports: [Designer],
    template: `<sti-designer [(report)]="report" [options]="options" (onSaveReport)="onSaveReport($event)" (onCreateReport)="onCreateReport($event)" (onExit)="onExit($event)"></sti-designer>`
})
export class Example {
    report: Stimulsoft.Report.StiReport;
    options: Stimulsoft.Designer.StiDesignerOptions;

    onSaveReport(args: Stimulsoft.Designer.SaveReportArgs) {
        alert("onSaveReport event");
    }

    onCreateReport(args: Stimulsoft.Designer.CreateReportArgs) {
        var dataSet = new Stimulsoft.System.Data.DataSet("Demo");
        dataSet.readJsonFile("Data/Demo.json");
        args.this.report.regData("Demo", "Demo", dataSet);
        args.this.report.dictionary.synchronize();
    }

    onExit(args: Stimulsoft.Report.EventDataArgs) {
        alert("onExit event");
    }

    constructor() {
        this.report = new Stimulsoft.Report.StiReport();
        this.report.loadFile("Dashboards/Dashboard.mrt");

        this.options = new Stimulsoft.Designer.StiDesignerOptions();
        this.options.appearance.fullScreenMode = true;
    }
}

How it works. Each designer action is surfaced as an event, so your app can persist, seed or track the user's work.
View on GitHub Download
By using this website, you agree to the use of cookies for analytics and personalized content. Cookies store useful information on your computer to help us improve efficiency and usability. For more information, please read the privacy policy and cookie policy.
I agree