How to use EJ1 report designer and EJ2 controls in ASP.NET Core
Please find the below help documentation link for how to create a report designer application.
Please find the below steps for how to use EJ2 and report designer 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 EJ1 and EJ2 controls</title> @* Syncfusion Essential JS 2 Styles *@ <link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" /> @* Syncfusion Essential JS 1 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.reportdesigner.theme.compatibility.min.css" rel="stylesheet" /> <link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/default-theme/ej.reportdesigner.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" /> <link href="https://cdn.syncfusion.com/4.1.0.16/js/reports/flat-azure/ej.reportdesigner.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.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 Essential JS 1 Scripts *@ <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.44.0/mode/vb/vb.min.js" type="text/javascript"></script> <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> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/common/ej.report-designer-widgets.min.js"></script> <!--Chart component script added before the Report Designer and viewer script to render report with chart report item--> <script src="https://cdn.syncfusion.com/4.1.0.16/js/reports/data-visualization/ej.chart.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:400px" width="500px"> <h2> ReportDesigner </h2> <sf-report-designer id="reportviewer1" service-url="/Home"></sf-report-designer> </div> </div> </div> </div>
Please find the below sample for your reference.
https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2andReportDesigner826472647.zip
