Load Rest api data in sync fusion report viewer in angular 2

[Surbhi Agrawal]

Hi Guys,

I am trying to load REST api json data in syncfusion report viewer, can anyone help me out to bind the data in report viewer.  Sample Rest api json data is :-

[ { "numberOfLeadsPerCampaignID": 0, "campaignID": 0, "campaignName": "string", "campaignTypeID": 0, "campaignTypeName": "string", "topicID": 0, "numberOfLeads": 0, "topicName": "string", "createDate": "2017-07-19T08:38:50.633Z", "updateDate": "2017-07-19T08:38:50.634Z", "errors": [ "string" ] } ]

[Yuvaraj Devarajan]

Hi Surbhi,  

 

Thanks for contacting Syncfusion support.  

 

Our ReportViewer has support to add JSON data sources value for the report locally in through Web API or control render page using DataSource property. If you have to load the datasource value for the report locally then you have to specify the processing mode of the report is local as shown in below code example. 

        public void OnInitReportOptions(ReportViewerOptions reportOption) 

        { 

            reportOption.ReportModel.ProcessingMode = ProcessingMode.Local; 

            reportOption.ReportModel.ReportPath = HttpContext.Current.Server.MapPath("~/App_Data/" + reportOption.ReportModel.ReportPath); 

        } 

         

        //Method will be called when reported is loaded 

        public void OnReportLoaded(ReportViewerOptions reportOption)  

        {            

            var jsondata = "[{ \"numberOfLeadsPerCampaignID\": 0, \"campaignID\": 0, \"campaignName\": \"string\", \"campaignTypeID\": 0,\"campaignTypeName\": \"string\", \"topicID\": 0, \"numberOfLeads\": 0, \"topicName\": \"string\", \"createDate\": \"2017-07-19T08:38:50.633Z\", \"updateDate\": \"2017-07-19T08:38:50.634Z\", \"errors\": \"string\" }]";       

            var DataSourceValue = new System.Web.Script.Serialization.JavaScriptSerializer().Deserialize<List<ReportService.Controllers.JsonDataClass>>(jsondata.ToString());             

            reportOption.ReportModel.DataSources.Clear(); 

            reportOption.ReportModel.DataSources.Add(new ReportDataSource { Name = "DataSet1", Value = DataSourceValue });  

        } 

 

We have prepared a Angular 2 and ReportService sample which can be downloaded from below location, 

Angular 2: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ReportViewerAngular2017596345.zip  

Reporting Service: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ReportService1605176593.zip  

 

Please refer to the below UG documentation link for more detail, 

https://help.syncfusion.com/angular/reportviewer/getting-started  

https://help.syncfusion.com/js/reportviewer/report-datasources  

 

You can obtain the Angular 2 ReportViewer samples from the below build installed location, 

%userprofile%\AppData\Local\Syncfusion\EssentialStudio\version\ JavaScript\ng2 app 

 

Regards, 

Yuvaraj D.