[]
This page provides a detailed overview of the ActiveReportsJS Report Designer component. You can check the Get Started tutorial for a concise guide for integrating this component into a pure JavaScript application.
To use ActiveReportsJS Designer component in a pure JavaScript application, it should include the following scripts and styles:
The easiest way to include these scripts is to use CDN references, for example:
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-ui.css"
type="text/css"
/>
<link
rel="stylesheet"
href="https://cdn.grapecity.com/activereportsjs/2.latest/styles/ar-js-designer.css"
type="text/css"
/>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.grapecity.com/activereportsjs/2.latest/dist/ar-js-designer.js"></script>
Alternatively, you can download these scripts and styles from the ActiveReportsJS Download Page. You can find them in the dist
and styles
folders of the download package, respectively.
Finally, @grapecity/activereports package can be installed in an application's folder and these scripts can be referenced from node_modules\@grapecity\activereports\dist\
and node_modules\@grapecity\activereports\styles\
folders
Once scripts and styles are loaded, the Designer component can be initialized by invoking GC.ActiveReports.ReportDesigner.Designer
constructor and passing the CSS selector of the hosting element into it, for example:
<body>
<div id="designer-host"></div>
<script>
var designer = new GC.ActiveReports.ReportDesigner.Designer("#designer-host");
</script>
</body>
The report designer instance exposes methods and properties that can be used to set the application's behavior with regards to report loading, saving, and previewing.
Submit and view feedback for