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
Starting in 2019, the Reporting control is no longer included in Essential Studio. If you're experiencing issues with the Syncfusion Reporting Platform, Report Viewer, Report Designer, or Report Writer, we recommend migrating to Bold Reports, our dedicated reporting platform.

Bold Reports offers a comprehensive suite of tools and features for all your reporting needs, and we will help you make a smooth transition from the discontinued control. Our support team at https://support.boldreports.com/ is here to assist you with any questions or difficulties you may encounter during the migration process.

We thank you for choosing Syncfusion and appreciate your understanding.

Syncfusio report viewer not loading using AngularJS

I have used syncfusion report viewer but report not loading using AngularJS
But using seperate UI and API projects
I have used seperate Ui side project and API project where i have wrtten method for methods for report

Here i given UI side code in JSplayground ::
UI side

And APi side code is::
 public class ReportApiController : ApiController, IReportController
        //Post action for processing the rdl/rdlc report
        public object PostReportAction(Dictionary<string, object> jsonResult)
            return ReportHelper.ProcessReport(jsonResult, this);
        //Get action for getting resources from the report
        public object GetResource(string key, string resourcetype, bool isPrint)
            return ReportHelper.GetResource(key, resourcetype, isPrint);
        //Method will be called when initialize the report options before start processing the report       
        public void OnInitReportOptions(ReportViewerOptions reportOption)
            //Add SSRS Server and database credentials here

           // reportOption.ReportModel.ReportServerCredential = new System.Net.NetworkCredential("ssrs", "RDLReport1");
           // reportOption.ReportModel.DataSourceCredentials.Add(new DataSourceCredentials("DataSet1", "", ""));
            //reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "DataSet1", Value = Customers.GetCustomers() }); 
        //Method will be called when reported is loaded
        public void OnReportLoaded(ReportViewerOptions reportOption)
            //reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "DataSet1", Value = Customers.GetCustomers() });      

        public IList GetDataForReport()
            return Customers.GetCustomers();

    #region Top Sales
    public class Customers
        public string Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }

        public static IList GetCustomers()
            List<Customers> CustomersCollection = new List<Customers>();
            Customers customers = null;

            customers = new Customers()
                Name = "Gomtesh",
                Id = "1",
                Email = "gomtesh@gmail.com"

            customers = new Customers()
                Name = "Prasad",
                Id = "2",
                Email = "prasad@gmail.com"

            return CustomersCollection;

4 Replies

SR Soundara Rajan S Syncfusion Team December 18, 2015 07:13 AM UTC

Hi Gomtesh,

Thanks for contacting Syncfusion support.

The ProductService is not defined in shared code example as shown below. Due to this, ReportViewer control doesn’t render in your application. 

We have modified the shared sample and it can be downloaded from the below location,

Based on your requirement, we have retrieved the Report data from WebAPI as shown in the  below example, 


        var App = angular.module("MyApp", ["ejangular"]);

        App.controller('ProductReportController', function ($scope) {

            $scope.report = true;

            $scope.samplevalue = "http://" + window.location.host + '/api/ReportApi';

            $scope.path = 'RSSMRP01.rdlc';

            $scope.Reportdatasources = getDatasource();

            $scope.mode = ej.ReportViewer.ProcessingMode.Local;


        function getDatasource() {

            return [{

                value: getData(),

                name: "DataSet1"



        function getData() {

            var datasource;


                dataType: "json",

                type: "POST",

                async: false,

                url: "http://" + window.location.host + "/api/ReportApi/GetDataForReport",

                success: function (result) {

                    datasource = result;



            var dataManager = ej.DataManager(datasource);

            var query = ej.Query().select("Id", "Name");

            var reportResult = dataManager.executeLocal(query);

            return reportResult;


Soundara Rajan S.

GO Gomtesh December 18, 2015 09:57 AM UTC

Hi Soundara,

As i clearly said my UI and API projects are different

So if i write statement 

  $scope.samplevalue = "http://localhost:60360/api/ReportApi";

instaed of

 $scope.samplevalue = "http://" + window.location.host +'/api/ReportApi';

and instead of
 url: "http://" + window.location.host +"/api/ReportApi/GetDataForReport",

i have written 
  $scope.samplevalue = "http://localhost:60360/api/ReportApi";

but it gives error as i attached file 
and for 
beacause i run my UI project  separate from API project

but it give error in browser console

Attachment: serror_8b87fd44.rar

GO Gomtesh December 18, 2015 12:54 PM UTC

Above issue get solved ....

its  Cross-domain calls in ASP.NET Web APIs issue

SR Soundara Rajan S Syncfusion Team December 21, 2015 06:38 AM UTC

Hi Gomtesh,

We are happy to hear that your issue has been resolved. Please let us know, if you have any further queries on this. 
Soundara Rajan S.

Live Chat Icon For mobile
Up arrow icon