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. Image for the cookie policy date
close icon
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.

ASP.NET Core / Angular Reportviewer not working

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';

7 Replies

VS Vinoth Srinivasan Syncfusion Team 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. 



AN Anand 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


VS Vinoth Srinivasan Syncfusion Team 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. 



AN Anand 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


VS Vinoth Srinivasan Syncfusion Team 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. 



AN Anand 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


VS Vinoth Srinivasan Syncfusion Team 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. 


Loader.
Live Chat Icon For mobile
Up arrow icon