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.
Unfortunately, activation email could not send to your email. Please try again.

Syncfusio report viewer not loading using AngularJS

Thread ID:

Created:

Updated:

Platform:

Replies:

121470 Dec 17,2015 07:58 AM Dec 21,2015 01:38 AM JavaScript 4
loading
Tags: ejReportViewer
Gomtesh
Asked On December 17, 2015 07:58 AM

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 = "gomtesh@gmail.com"
            };
            CustomersCollection.Add(customers);

            customers = new Customers()
            {
                Name = "Prasad",
                Id = "2",
                Email = "prasad@gmail.com"
            };         
            CustomersCollection.Add(customers);

            return CustomersCollection;
        }
    }
    #endregion

Soundara Rajan S [Syncfusion]
Replied On December 18, 2015 02:13 AM

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
Replied On December 18, 2015 04:57 AM

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
Replied On December 18, 2015 07:54 AM

Above issue get solved ....

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



Soundara Rajan S [Syncfusion]
Replied On December 21, 2015 01:38 AM

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.

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.

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.

;