1. Home
  2. Forum
  3. Report Platform
  4. Report Viewer in the Essential JS 2 ASP.NET Core application
If you became a customer of the Syncfusion� Reporting Platform or the Report Viewer, Report Designer, or Report Writer components before October 2019 and have questions related to those products, you can request support through our forum system. However, please note that this support system is only for existing customers who are still using the Syncfusion� Reporting Platform or its components and not for new customers looking for reporting products from Syncfusion�.

For new customers or those with general reporting questions, we recommend contacting our support team at https://support.boldreports.com/, which is a separate brand created by Syncfusion� for its reporting solutions. Our team will be happy to assist you with any questions you may have.

Thank you for choosing Syncfusion� for your reporting needs.

Report Viewer in the Essential JS 2 ASP.NET Core application

Hi. How can I use the Report Viewer in the Essential JS 2 ASP.NET Core application?
Thanks.

9 Replies
MM Mageshyadav M Syncfusion Team November 8, 2018 10:30 AM UTC

Hi Costa, 
 
Currently we don't have support ReportViewer in EJ2 application. But we can use EJ1 components with EJ2. 
 
Please find the below steps for how to use EJ1 and EJ2 both components in our application. 
 
Step 1: Install the required Essential JS 1 and Essential JS 2 NuGet packages.  
 
Essential JS 1 NuGet Package  
Syncfusion.EJ  
Syncfusion.EJ.AspNet.Core   
Syncfusion.EJ.ReportViewer.AspNet.Core 
 
The above mentioned Nuget packages will be available under the below link.  
  
Step 2:  Open the _ViewImports.cshtml to add the tag helpers for Syncfusion.EJ and Syncfusion.EJ2 package.  
 
  
@using Syncfusion.JavaScript  
  
@addTagHelper "*, Syncfusion.EJ"  
@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.  
Note: We need to refer the EJ2 script, theme before referring the EJ1 script 
 
<head> 
    @* Syncfusion Essential JS 2 Styles *@ 
    <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" /> 
    @* Syncfusion Essential JS 1 Styles *@ 
    <link rel='nofollow' href="http://cdn.syncfusion.com/16.3.0.21/js/web/flat-azure/ej.web.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> 
    @* Syncfusion Essential JS 2 Scripts *@ 
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> 
    @* Syncfusion Essential JS 1 Scripts *@ 
    <script src="http://cdn.syncfusion.com/16.3.0.21/js/web/ej.web.all.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. We need to extend the ej namespace with Syncfusion to set the compatible between Essential JS 1 and Essential JS 2.  
 
<body>  
   @RenderSection("scripts", required: false)  
    <script>  
             $.extend(ej, Syncfusion);  
    </script>  
      
    <ej-script-manager></ej-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> 
                <ej-report-viewer id="reportviewer1" report-service-url="/Home" processing-mode="Remote"></ej-report-viewer> 
            </div> 
        </div> 
    </div> 
</div> 
 
We have prepared the sample for your reference and it can be downloaded from below location. 
 
Regards, 
Mageshyadav.M 


CO Costa November 12, 2018 12:40 PM UTC

The proposed solution works perfectly. Thank you.

CO Costa November 13, 2018 10:11 AM UTC

We're not out of the woods yet. The EJ1 ReportViewer works, and the EJ2 Grid gives you the following: TypeError: ej.data.UrlAdaptor is not a constructor at https://localhost:44325/GridTest:181:14

CO Costa November 13, 2018 11:06 AM UTC

Currently I was able to bypass the problem only by placing links to Syncfusion Essential JS 1 Styles, Syncfusion Essential JS 1 Scripts and Syncfusion Essential JS 2 Styles, Syncfusion Essential JS 2 Scripts and also script managers (ej-script-manager, ejs-scripts) on different pages. It's like the pain of playing in Dark Souls worked.

CO Costa November 13, 2018 11:23 AM UTC

Update.
Syncfusion Essential JS 2 Styles, Syncfusion Essential JS 2 Scripts and ejs-script manager can only be placed in _Layout.cshtml. This is real quest worked.


CO Costa November 13, 2018 12:15 PM UTC

In this case the 
<script>  
$.extend(ej, Syncfusion);  
</script>
is not required

MM Mageshyadav M Syncfusion Team November 14, 2018 09:33 AM UTC

Hi Costa, 
 
For resolution of the problem TypeError: ej.data.UrlAdaptor is not a constructor, we need to add below highlighted code snippets which was missed in our suggested sample 
 
<script> 
    var dataCopy = Object.assign({}, ej.data); 
    $.extend(ej, Syncfusion); 
    $.extend(ej.data, dataCopy); 
</script> 
 
 
Please find the above information from below link with Grid example, 
 
 
You can ignore the changes done by you to make ej1 reportviewer and ej2 grid working. 
 
Regards, 
Mageshyadav.M 


CO Costa November 15, 2018 08:53 AM UTC

Thank you, I will try to use this code.

MM Mageshyadav M Syncfusion Team November 15, 2018 09:03 AM UTC

Hi Costa, 
  
Thanks for your update. 
  
Please let us know if the reported issues not resolved using our last update suggestion also. 
  
Regards, 
Mageshyadav.M 


Loader.
Up arrow icon