Reporting for React
Topics in this section describe how to create reporting applications based on the React framework.
Document Viewer
Integration
Customization
Report Designer
Integration
Print and Export
Client-Side API
To access the client-side Reporting API in Vue applications, use the following objects:
- Document Viewer - the IPreviewModel interface
- Report Designer - the JSReportDesigner class
Review the Report Designer Client-Side Configuration help topic for information on Knockout bindings.
To handle client-side events, use callbacks with the same name in the Knockout bindings. The following code snippet illustrates how to use the CustomizeExportOptions callback to remove the XLS format from the Export To drop-down list and from the Export Options panel:
import React from "react";
import DevExpress from "devexpress-reporting/dx-webdocumentviewer";
import ko from "knockout";
class ReportViewer extends React.Component {
constructor(props) {
super(props);
// ...
this.callbacks = {
CustomizeExportOptions: function(s,e) {
e.HideFormat(DevExpress.Reporting.Viewer.ExportFormatID.XLS);
}
};
}
componentDidMount() {
ko.applyBindings(
{
//...
callbacks: this.callbacks
},
this.refs.viewer
);
}
// ...
}
export default ReportViewer;