Using Viewer Events
Our sample projects and report templates can help you learn the basics of working with our products.Set up the report viewer in .NET 10.0, load a template, and connect the component to the application.
Client-side events. Every viewer event is exposed as a React prop named
Here two events are handled:
Server-side handling. Interactive events that need the server are routed to the
The
Client-side events. Every viewer event is exposed as a React prop named
on<Event>. Pass a handler function and it will be invoked with an event object:import React from 'react';
import { StimulsoftViewer } from 'stimulsoft-viewer-react';
export const App: React.FC = () => {
const loaded = (): void => {
console.log('Report loaded');
};
const onExport = (event: any): void => {
console.log(`Export to: ${event.format}`);
};
return (
<StimulsoftViewer
requestUrl="/Viewer/{action}"
action="InitViewer"
height="100vh"
onLoaded={loaded}
onExport={onExport}
/>
);
};Here two events are handled:
onLoaded fires once the report has been rendered and is ready, and onExport fires when the user exports the report — the event object carries details such as the target format. The same pattern works for other viewer events (printing, interaction, e-mail, and more); simply add the corresponding on... prop.Server-side handling. Interactive events that need the server are routed to the
ViewerEvent action, registered in the options during initialization:public IActionResult InitViewer()
{
var requestParams = StiReactViewer.GetRequestParams(this);
var options = new StiReactViewerOptions();
options.Actions.GetReport = "GetReport";
options.Actions.ViewerEvent = "ViewerEvent";
return StiReactViewer.ViewerDataResult(requestParams, options);
}
[HttpPost]
public IActionResult ViewerEvent()
{
return StiReactViewer.ViewerEventResult(this);
}The
StiReactViewer.ViewerEventResult helper processes the incoming event and returns the result the viewer expects, so server-side actions such as export and print work out of the box.