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

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