How to use EJ1 report viewer and EJ2 controls in ASP.NET Core
Please find the below help documentation link for how to create a report viewer application.
Please find the below steps for how to use EJ2 and report viewer in sample application.
Step 1: Install the required Essential EJ1 and Essential EJ2 NuGet packages.
Reporting EJ1 NuGet Package :
Syncfusion.Reporting.AspNet.Core.
Syncfusion.Reporting.Net.Core.
Essential EJ2 NuGet Package :
Syncfusion.EJ2.AspNet.Core.
Step 2: Open the _ViewImports.cshtml to add the tag helpers for Syncfusion.EJ and Syncfusion.EJ2 package.
@using Syncfusion.Reporting.TagHelpers @addTagHelper *, Syncfusion.Reporting.AspNet.Core @addTagHelper "*, Syncfusion.EJ2"
Step 3: Add the compatibility styles and script references of Essential JS 1 and Essential JS 2 components in the _Layout.cshtml file.
We need to refer the EJ2 script, theme before referring the EJ1 script. Also, we have to add the below highlighted compatibility style scripts to avoid the style overlapping problem with EJ1 and EJ2
<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"></script> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/ej.report-viewer.min.js" type="text/javascript"></script> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/ej.report-designer.min.js" type="text/javascript"></script> </head>
Step 4: Add script manager of Essential JS 1 and Essential JS 2 components at the end of body tag in _Layout.cshtml file.
<body style="height:100%;width:100%;padding:0;">
<div class="container body-content">
@RenderBody()
</div>
@RenderSection("scripts", required: false)
<script>
$.extend(ej, Syncfusion);
</script>
<sf-script-manager></sf-script-manager>
<ejs-scripts></ejs-scripts>
</body>
Step 5: Render the Essential JS 1 and Essential JS 2 components in the view page.
<div class="EJ2"> <h2> Essential JS 2 - button Component </h2> <ejs-button id="primarybtn" cssClass="e-primary" content="Primary"></ejs-button> </div> <div class="card"> <div class="card-header"> <div class="card-body"> <div id="repResult" style="height:300px" width="500px"> <h2> Essential JS 1 - ReportViewer </h2> <sf-report-viewer id="reportviewer1" report-service-url="/Home" processing-mode="Remote"></sf-report-viewer> </div> </div> </div> </div> <script type="text/javascript"> </script> <sf-script-manager></sf-script-manager>
Please find the below sample for your reference.
https://www.syncfusion.com/downloads/support/directtrac/general/ze/ReportViewerCore1168906531.zip
