How can use the ReportViewer along with EJ2 controls
We can able to use the ReportViewer control in EJ2 controls. We must add or import the compatibility styles references of ReportViewer control and Essential JS 2 components with the order used in this article.
Angular:
You can the below help documentation for how to create a ReportViewer control in Angular platform.
ReportViewer control getting started
You can find the below help documentation for how to create Angular application with EJ2 controls.
Find the reference below of using the order and compatibility,
"styles": [ "src/styles.css", "./node_modules/@syncfusion/ej2-base/styles/material.css", "./node_modules/@syncfusion/ej2-buttons/styles/material.css", "./node_modules/@syncfusion/reporting-javascript/Content/reports/ej.widgets.core.compatibility.min.css", "./node_modules/@syncfusion/reporting-javascript/Content/reports/default-theme/ej.theme.compatibility.min.css", "./node_modules/@syncfusion/reporting-javascript/Content/reports/default-theme/ej.reports.all.min.css" ]
JavaScript, ASP.NET Webforms, ASP.NET MVC, ASP.NET Core:
You can find the below help documentation for how to create a ReportViewer control in various platform.
JavaScript Reportviewer getting started
ASP.NET Webforms ReportViewer getting started
ASP.NET MVC ReportViewer getting started
ASP.NET Core ReportViewer getting started
You can find the below help documentation for how to create various platform with EJ2 controls.
JavaScript EJ2 getting started
ASP.NET Webforms EJ2 getting started
ASP.NET MVC EJ2 getting started
ASP.NET Core EJ2 getting started
Find the reference below of using the order and compatibility.
<link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/ej.widgets.core.compatibility.min.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/default-theme/ej.theme.compatibility.min.css" rel="stylesheet" />
We need to refer the EJ2 script, theme before referring the ReportViewer script and themes. Also, we have to add the below highlighted compatibility style scripts to avoid the style overlapping problem with ReportViewer control and EJ2 controls
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Syncfusion ReportViewer and EJ2 controls</title> @* Syncfusion Essential JS 2 Styles *@ <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" /> @* Syncfusion report platform Styles *@ <link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/ej.widgets.core.compatibility.min.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/default-theme/ej.theme.compatibility.min.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/flat-azure/ej.reports.all.min.css" rel="stylesheet" /> @*Default scripts*@ <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script> <script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script> @* Syncfusion Essential JS 2 Scripts *@ <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> @* Syncfusion Report platform Scripts *@ <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/common/ej.reporting.common.min.js"></script> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/common/ej.reporting.widgets.min.js"></script> <!--Chart component script added before the Report Designer and viewer script to render report with chart report item--> <!--Render the chart item. Add this script only if your report contains the chart report item.--> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/data-visualization/ej.chart.min.js"></script> <!--Render the gauge item. Add this script only if your report contains the gauge report item. --> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/data-visualization/ej.lineargauge.min.js"></script> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/data-visualization/ej.circulargauge.min.js"></script> <!--Render the map item. Add this script only if your report contains the map report item.--> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/data-visualization/ej.map.min.js"></script> <!-- Report Viewer component script--> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/ej.report-viewer.min.js" type="text/javascript"></script> </head>
