We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

ASP.NET Core / Angular Reportviewer not working

Thread ID:

Created:

Updated:

Platform:

Replies:

146962 Aug 27,2019 04:47 AM UTC Aug 31,2019 05:03 AM UTC Report Platform 7
loading
Tags: Report Viewer
Anand
Asked On August 27, 2019 04:47 AM UTC

I want to display an RDLC report in my Angular web application that communicates with ASP.NET CORE WebAPI.
It is not working. Checked the Console in Google Chrome and it had the following responses from PostReportAction:
Response 1:
{"inProgress":"completed","isReportLoad":true,"paramInfo":"NoParams","reportViewerToken":"266C8BD6-60B1-CC15-1088-966A054BCD0D@reportViewer_Control","reportViewerID":"266C8BD6-60B1-CC15-1088-966A054BCD0D@reportViewer_Control","dataSources":null,"dataSets":[],"reportParameters":null,"isRDLC":true,"errorInfo":null,"serviceType":"NETCore"}
Response 2:
{}

What am I missing here? My Code is as below:
[Route("api/[controller]")]
[ApiController]
[EnableCors("MyPolicy")]
public class ReportApiController : ControllerBase, Syncfusion.EJ.ReportViewer.IReportController
{
// Report viewer requires a memory cache to store the information of consecutive client request and
// have the rendered report viewer information in server.
private Microsoft.Extensions.Caching.Memory.IMemoryCache _cache;
// IHostingEnvironment used with sample to get the application data from wwwroot.
private Microsoft.AspNetCore.Hosting.IHostingEnvironment _hostingEnvironment;
Dictionary jsonArrayy;
// Post action to process the report from server based json parameters and send the result back to the client.
public ReportApiController(Microsoft.Extensions.Caching.Memory.IMemoryCache memoryCache,
Microsoft.AspNetCore.Hosting.IHostingEnvironment hostingEnvironment)
{
_cache = memoryCache;
_hostingEnvironment = hostingEnvironment;
}
// Post action to process the report from server based json parameters and send the result back to the client.
//[HttpPost]
[HttpPost("PostReportAction")]
public object PostReportAction([FromBody] Dictionary jsonArray)
{
this.jsonArrayy = jsonArray;
return Syncfusion.EJ.ReportViewer.ReportHelper.ProcessReport(jsonArray, this, this._cache);
}
public object PostFormReportAction()
{
return Syncfusion.EJ.ReportViewer.ReportHelper.ProcessReport(this.jsonArrayy, this, this._cache);
}
// Method will be called to initialize the report information to load the report with ReportHelper for processing.
public void OnInitReportOptions(Syncfusion.EJ.ReportViewer.ReportViewerOptions reportOption)
{
//reportOption.ReportModel.ReportingServer = new ReportingServerExt();
reportOption.ReportModel.ProcessingMode = ProcessingMode.Local;
//reportOption.ReportModel.ReportServerCredential = new System.Net.NetworkCredential("sbna", "war");
//reportOption.ReportModel.DataSourceCredentials.Add(new DataSourceCredentials("AdventureWorks", "ssrs1", "RDLReport1"));
string basePath = _hostingEnvironment.WebRootPath;
//// Here, we have loaded the sample report report from application the folder wwwroot. Sample.rdl should be there in wwwroot application folder.
FileStream reportStream = new FileStream(basePath + @"\Report1.rdlc", FileMode.Open, FileAccess.Read);
reportOption.ReportModel.Stream = reportStream;
}
// Method will be called when reported is loaded with internally to start to layout process with ReportHelper.
public void OnReportLoaded(Syncfusion.EJ.ReportViewer.ReportViewerOptions reportOption)
{
}
//Get action for getting resources from the report
[ActionName("GetResource")]
[AcceptVerbs("GET")]
// Method will be called from Report Viewer client to get the image src for Image report item.
public object GetResource(Syncfusion.EJ.ReportViewer.ReportResource resource)
{
return Syncfusion.EJ.ReportViewer.ReportHelper.GetResource(resource, this, _cache);
}
}
<ej-reportviewer id="reportViewer_Control"
[reportServiceUrl] = "serviceUrl"
[processingMode] = "Local"
[reportServerUrl] = "serverUrl"
[reportPath] = "reportPath" >
ej-reportviewer>


this.serviceUrl = 'http://localhost:54353/api/ReportApi';
this.reportPath = 'Report1.rdlc';

Vinoth Srinivasan [Syncfusion]
Replied On August 27, 2019 06:40 AM UTC

Hi Anand, 

Thanks for your interest in Syncfusion Products. 

The mentioned issue occurs when you are trying to load the RDLC report with processing mode as local, but you did not pass the local data to that report. So, could you please pass the local data for that report to avoid the mentioned problem at your end as shown in below help documentation. 

Please find the below sample for your reference. 

Regards, 
Vinoth S. 


Anand
Replied On August 28, 2019 04:21 AM UTC

The application you have uploaded is working. But I want to display the report in my angular application. I tried by using a similar code but it is not working. I've uploaded both the webapi and angular projects. Can you please have a look at them and tell me where I was wrong?

Attachment: AngularReportViewer_9e367738.zip

Vinoth Srinivasan [Syncfusion]
Replied On August 28, 2019 06:51 AM UTC

Hi Anand, 

We have validated the shared sample and the issue occurred due to the lower version used in angular application. You have used latest version in service, so we have modified your angular application to latest version to render the report properly in ReportViewer. Also, please specify the report ProcessingMode in controller file at server side. We have modified your sample based on this and it can be downloaded from below location. 

 
Regards, 
Vinoth S. 


Anand
Replied On August 30, 2019 04:42 AM UTC

Thanks Vinoth, that worked.

Another issue though. I am trying to get that reportviewer to work in latest version of angular. I am getting an error in the console like:

ej.core.min.js:10 Uncaught ReferenceError: jQuery is not defined
    at ej.core.min.js:10
    at Object.<anonymous> (ej.core.min.js:10)
    at ej.core.min.js:10
    at Object../node_modules/syncfusion-javascript/Scripts/ej/common/ej.core.min.js (ej.core.min.js:10)
    at __webpack_require__ (bootstrap:79)
    at ej.globalize.min.js:10
    at Object../node_modules/syncfusion-javascript/Scripts/ej/common/ej.globalize.min.js (ej.globalize.min.js:10)
    at __webpack_require__ (bootstrap:79)
    at ej.grid.min.js:10
    at Object../node_modules/syncfusion-javascript/Scripts/ej/web/ej.grid.min.js (ej.grid.min.js:10)

I've included jquery in package.json but I am not sure why that error occurs. I've attached the angular project here. Please have a look at it. 

Attachment: rdlcAngularLatest_c59741f2.zip

Vinoth Srinivasan [Syncfusion]
Replied On August 30, 2019 02:37 PM UTC

Hi Anand, 

The reported issue occur when we miss to specify the window.jQuery object to render the component. Import jQuery in the src/polyfills.ts file as shown in the following code snippet. 
 

import * as jquery from 'jquery'; 
window['jQuery'] = jquery; 
window['$'] = jquery; 
 

Also, please specify the report viewer component style in angular.json file in style tag as shown in the below. 

"styles": [ 
              "src/styles.css", 
              "./node_modules/syncfusion-javascript/Content/ej/web/default-theme/ej.web.all.min.css" 
            ], 
 

However, we are having some issue with toolbar in latest scripts and it will be fixed in our upcoming nuget release. 

Regards, 
Vinoth S. 


Anand
Replied On August 30, 2019 09:02 PM UTC

Vinoth, 

I've made the changes you have mentioned. I've attached the screenshot of what was displayed to me. 
Is that what you are getting on your end too? Only the report was displayed. No toolbar.

There's no solution to this? 

Attachment: reportViewerScreenshot_6efab8e9.zip

Vinoth Srinivasan [Syncfusion]
Replied On August 31, 2019 05:03 AM UTC

Hi Anand, 

The reported issue occurs due to the missing of style script, so please specify the report viewer component style in angular.json file in style tag as shown in the below. 

"styles": [ 
              "src/styles.css", 
              "./node_modules/syncfusion-javascript/Content/ej/web/default-theme/ej.web.all.min.css" 
            ], 
 

Regards, 
Vinoth S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon