Using Designer Events
Our sample projects and report templates can help you learn the basics of working with our products.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.
Each event receives the current report through
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.