Syncfusio report viewer not loading using AngularJS

[Gomtesh]

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 ::
http://jsplayground.syncfusion.com/cxzkjdu0
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
        [System.Web.Http.ActionName("GetResource")]
        [AcceptVerbs("GET")]
        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.Clear();
            //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.Clear();
            //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 = "[e-mail]"
            };
            CustomersCollection.Add(customers);

            customers = new Customers()
            {
                Name = "Prasad",
                Id = "2",
                Email = "[e-mail]"
            };         
            CustomersCollection.Add(customers);

            return CustomersCollection;
        }
    }
    #endregion

[Soundara Rajan S]

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,
http://www.syncfusion.com/downloads/support/forum/121470/ze/AngularDemo-1425661531.zip

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

    <script>

        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;

            $.ajax({

                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;

        }
    </script>

 
Regards,
Soundara Rajan S.

[Gomtesh]

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

[Gomtesh]

Above issue get solved ....

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

[Soundara Rajan S]

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. 
 
Regards,
Soundara Rajan S.