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.

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

Thread ID:

Created:

Updated:

Platform:

Replies:

131607 Jul 19,2017 04:45 AM Jul 20,2017 07:14 AM Angular 1
loading
Tags: ejReportViewer
Surbhi Agrawal
Asked On July 19, 2017 04:45 AM

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 07:14 AM

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, 
 
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 
 
Regards, 
Yuvaraj D. 
 


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.

;