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.

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

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" ] } ]

1 Reply

YD Yuvaraj Devarajan Syncfusion Team July 20, 2017 11:14 AM UTC

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.Add(new ReportDataSource { Name = "DataSet1", Value = DataSourceValue });  
We have prepared a Angular 2 and ReportService sample which can be downloaded from below location, 
Please refer to the below UG documentation link for more detail, 
You can obtain the Angular 2 ReportViewer samples from the below build installed location, 
%userprofile%\AppData\Local\Syncfusion\EssentialStudio\version\ JavaScriptg2 app 
Yuvaraj D. 

Live Chat Icon For mobile
Up arrow icon