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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:





131607 Jul 19,2017 08:45 AM UTC Jul 20,2017 11:14 AM UTC Angular 1
Tags: ejReportViewer
Surbhi Agrawal
Asked On July 19, 2017 08:45 AM UTC

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 [Syncfusion]
Replied On 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\ JavaScript\ng2 app 
Yuvaraj D. 


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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

Warning Icon 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.Close Icon