Using Designer Events

Unsere Beispiele der Projekte und Berichtsvorlagen helfen Ihnen, die Grundlagen der Arbeit mit unserer Software zu erlernen.
Auf GitHub ansehen
Produkte ✖Reports.JS ✖Designer ✖Ereignisse ✖
The React designer raises events for creating, saving, previewing and exiting a report.

Designer setup. Configure the designer, load the report template, process its callbacks, and connect the save action to the application.
import React from 'react';
import { Designer, Stimulsoft } from 'stimulsoft-reports-js-react/designer';

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

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

function onPreviewReport(args: Stimulsoft.Designer.PreviewReportArgs) {
    alert('onPreviewReport event');
}

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

function App() {
    var report = new Stimulsoft.Report.StiReport();
    report.loadFile('Reports/SimpleList.mrt');

    var designerOptions = new Stimulsoft.Designer.StiDesignerOptions();
    designerOptions.appearance.fullScreenMode = true;

    return (
        <Designer
            options={designerOptions}
            report={report}
            onSaveReport={onSaveReport}
            onCreateReport={onCreateReport}
            onPreviewReport={onPreviewReport}
            onExit={onExit}
        />
    );
}

export default App;

Each event receives the current report through args.report. onCreateReport is a good place to pre-register data for every new report, while onSaveReport is where you store the edited template.
Auf GitHub ansehen Herunterladen
Hallo! Brauchen Sie Hilfe?