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
  1. Home
  2. Forum
  3. ASP.NET Core
  4. How do I add WebApi data source type is report designer using ASP.NET core library
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.

How do I add WebApi data source type is report designer using ASP.NET core library

I am doing a trial of report designer but want to use my existing WebApi's to populate the data in Report Designer for end users. When I setup the project with report designer I only see SQL Server, I know we can add other types as well. Can you point me to the right direction either with a sample project or a link? I tried search in documentation but could not find web api data source type working with report designer. 

If there is no such option for ASp.NET Core then can you point me to your Javascript Report Design with WebApi data source type configuration documentation please.

I am currently using the latest version of your library.

Regards

21 Replies
MM Mageshyadav M Syncfusion Team March 6, 2019 12:20 PM UTC

Hi Umair, 
 
We don’t have option to connect the Web API directly in ASP.NET Core, but we can able to connect the Web API datasource with using the external data extensions. We have prepared the ASP.NET Core WebAPI datasource sample and it can be downloaded from below location. 
  
For your reference, please find the below Web API DataExtension sample.  
  
Please find the below steps to add the Web API DataExtension sample in our WebReportDesigner sample.  
  
Step1: Add the Web API Extension project reference to our Web ReportDesigner sample as shown in below snap:  
  
   
  
Step2: Add the Configuration section in AppConfig file as shown in below code example.  
  
App.config  
<?xml version="1.0" encoding="utf-8" ?> 
<configuration> 
  <configSections> 
    <section name="ReportingExtensions" type="Syncfusion.Reporting.Extensions,  Syncfusion.Report.Portable" allowLocation="true" allowDefinition="Everywhere" /> 
  </configSections> 
 
  <ReportingExtensions> 
    <DataExtension> 
      <Extension Name="WebAPI" Assembly="Syncfusion.Reporting.DataExtensions.WebAPI" Type="Syncfusion.Reporting.DataExtensions.WebAPI.WebAPIExtension"> 
        <Properties> 
          <Add Key="QueryDesignerEnabled" Value="true"/> 
          <Add Key="QueryFilterEnabled" Value="false"/> 
          <Add Key="QueryExpressionEnabled" Value="false"/> 
          <Add Key="QueryJoinerEnabled" Value="false"/> 
          <Add Key="QueryColumnEdit" Value="false"/> 
        </Properties> 
      </Extension> 
    </DataExtension> 
  </ReportingExtensions> 
</configuration> 
 
  
Step3: Add ReportDataExtensions in our default.html file as shown in below code example.  
  
Default.html:  
   $(function () { 
            $(document.body).bind('submit', $.proxy(formSubmit, this)); 
            $(window).bind('beforeunload', $.proxy(windowUnload, this)); 
            $("#container").ejReportDesigner( 
                { 
                    serviceUrl: '../../api/Report', 
                    create: 'controlInitialized', 
                    reportDataExtensions: [{ 
                        className: 'WebAPIDataSource', 
                        name: 'WebAPI', 
                        imageClass: 'e-reportdesigner-datasource-webapi', 
                        displayName: 'WebAPI' 
                    }], 
                }); 
        }); 
 
  
Output snap:  
   
 
Using the above sample, you can pull the data from WebAPI datasource. Please find the below documentation to connect WebAPI datasource with query parameter, 
 
Regards, 
Mageshyadav.M 


UM Umair March 6, 2019 04:47 PM UTC

Thank you very much, I will give this a try and get back to you if there is any query.

MM Mageshyadav M Syncfusion Team March 7, 2019 05:33 AM UTC

Hi Umair, 
  
Thanks for your update. 
  
Please let us know in case of any query after validation. 
  
Regards, 
Mageshyadav.M 


UM Umair March 7, 2019 02:47 PM UTC

Hello, 

I have been working on this, but I am using .net core code tag helpers and wanted to add the data extension using that way, can you tell me what to add in this please?

My code currently looks like this:

    <ej-report-designer id="reportdesigner1" create="controlInitialized" service-url="SyncfusionPoc" report-data-extensions="...what to add here...">

    </ej-report-designer>

I think I need to add the data extension as a parameter for <ej-report-designer> tag or via javascript and my current javascript looks like this:

    <script type="text/javascript">
        var isSubmit = true;
        $(function () {
            $(document.body).bind('submit', $.proxy(formSubmit, this));
            $(window).bind('beforeunload', $.proxy(windowUnload, this));
        });

        function controlInitialized(args) {
            var designer = $('#reportdesigner1').data('ejReportDesigner');
            designer.isCoreService = true;
        }

        function formSubmit(args) {
            isSubmit = false;
        }

        function windowUnload(args) {
            var designer = $('#reportdesigner1').data('ejReportDesigner');
            if (designer.hasReportChanges() && isSubmit) {
                return 'Changes you made may not be saved';
            }
            isSubmit = true;
        }
    </script>

Please advise.

Thank you.

UM Umair March 8, 2019 12:57 PM UTC

Thats great, thanks for your help. Just to confirm its ASP.NET Core and not ASP.NET MVC.

MM Mageshyadav M Syncfusion Team March 8, 2019 01:44 PM UTC

Hi Umair, 
  
Thanks for your update. 
  
We will update the sample to achieve your requirement on March 11, 2019 in Asp.Net Core only  
  
Regards, 
Mageshyadav.M 


MM Mageshyadav M Syncfusion Team March 11, 2019 02:01 PM UTC

Hi Umair, 
 
We have prepared the sample with Web API datasource option and it can be downloaded from below location. 
 
Please find the below step how to use the Web API in ASP.NET Core Report Designer application using ViewBag. 
 
Index.cshtml: 
<ej-report-designer id="reportdesigner1" create="controlInitialized" service-url="../Home" report-data-extensions="@ViewBag.ReportDataExtensions"> 
 
</ej-report-designer> 
<ej-script-manager></ej-script-manager> 
 
HomeController.cs: 
  public ActionResult Index() 
        { 
            ViewBag.ReportDataExtensions = new List<Syncfusion.JavaScript.Models.ReportDesigner.ReportDataExtensionsModule>(); 
            var ReportDataExtension = new Syncfusion.JavaScript.Models.ReportDesigner.ReportDataExtensionsModule(); 
            ReportDataExtension.Name = "WebAPI"; 
            ReportDataExtension.ClassName = "WebAPIDataSource"; 
            ReportDataExtension.ImageClass = "e-reportdesigner-datasource-webapi"; 
            ReportDataExtension.DisplayName = "WebAPI"; 
            ViewBag.ReportDataExtensions.Add(ReportDataExtension); 
            return View(); 
        } 
 
Let us know if you need any clarification. 
 
Regards, 
Mageshyadav.M 


UM Umair March 12, 2019 09:06 AM UTC

Hello,

Thanks for this, I was able to add the web api extension in my project. I also tried your project and works at a point, then it displays error related to System.Web assembly as its .net framwork. See screenshot. This error is both in your sample and my project.

Also after creating web api datasource how do I query my records? I am currently using this API to get JSON data back:
http://northwind.servicestack.net/customers.json

Can you please have a look.

Thank you.

UM Umair March 12, 2019 09:07 AM UTC

Sorry i have attached the screenshot here: 



MM Mageshyadav M Syncfusion Team March 13, 2019 06:39 PM UTC

Hi Umair, 
 
Please find the response for your queries. 
 
Query 
Response 
Thanks for this, I was able to add the web api extension in my project. I also tried your project and works at a point, then it displays error related to System.Web assembly as its .net framwork. See screenshot. This error is both in your sample and my project. 
We will validate this issue and provide the solution for this on March 14, 2019 
 
Also after creating web api datasource how do I query my records? I am currently using this API to get JSON data back: 
http://northwind.servicestack.net/customers.json 
Please refer the below help documentation which contains how to query the records with WebAPI, 
 
 
Please find the example hosted WebAPI URL to test on your side, 
 
 
 
 
Regards, 
Mageshyadav.M 


UM Umair March 25, 2019 10:59 AM UTC

Hello, can I get response for this query please?

"Thanks for this, I was able to add the web api extension in my project. I also tried your project and works at a point, then it displays error related to System.Web assembly as its .net framwork. See screenshot. This error is both in your sample and my project."

MM Mageshyadav M Syncfusion Team March 26, 2019 06:46 AM UTC

Hi Umair, 
 
Sorry for the delay. 
 
We have checked the mentioned problem with previously shared sample. The mentioned problem occurs when we are referring the “System.Web” assembly 4.0.0.0 version which is not working in ASP.NET Core application. So we have modified the sample with “NewtonSoft.json” NuGet with 9.0.1 version. Now it is working properly. So could you please add the below shared Web API sample in your application and confirm whether that sample is working or not at your end. 
 
 
If issue still persists in your sample then could you please share your sample to validate the mentioned issue at our end. 
 
Regards, 
Mageshyadav.M 


UM Umair May 8, 2019 03:17 PM UTC

Hello,

Thank you for sorting out the previous issue with system.web assembly.

I have got into other couple of issues related to general report opening and saving and web api not reading the json properly.

Here is the list:

1. when using this json file as an example: http://northwind.servicestack.net/customers.json for web api, I am unable to select child objects. I think the code for web api's json parsing requires that the json is flat and there are no child elements in it. I also checked this in line 440 method private DataTable JsonStringToDataTable(string jsonString) { ... }

For example how do I get the City from the below simple json to be displayed in the report designer:

{
 "Guests": [
 {
 "Name": "Jack",
 "Address": 
 {
 "City": "London"
 }
 },
 {
 "Name": "David",
 "Address": 
 {
 "City": "Swansea"
 }
 },
 ]
}

There can be objects that are even deeper in the hierarchy.

2. When creating web api data source I can not see "API query builder" and "Code Mode" as per your example here there are many options which are not visible to me: https://help.syncfusion.com/report-platform/reportdesigner/web/how-to/web-api-datasource

3. I want to load the report rdl files dynamically when user views a certain report. When I try to load the report using the stream in this method: public void OnReportLoaded(ReportViewerOptions reportOption) using code reportOption.ReportModel.Stream the report still expects a file path and shows error that file not found. 

4. Dynamically adding headers to report viewer and designer for example we need to add JWT token header for the logged in user. Where do we add that when the report viewer or designer is being opened?

I think there are various things that might need fixing in WebAPIExtension.cs file you shared earlier and some more suggesstions I need to add totals and group totals when viewing web api data, but we will know once I get the above fixes to work.

Regards

VS Vinoth Srinivasan Syncfusion Team May 9, 2019 01:02 PM UTC

Hi Umair, 
 
Please find the below response for your queries. 
 
Query 
Response 
1. when using this json file as an example: http://northwind.servicestack.net/customers.json for web api, I am unable to select child objects. I think the code for web api's json parsing requires that the json is flat and there are no child elements in it. I also checked this in line 440 method private DataTable JsonStringToDataTable(string jsonString) { ... } 
we were unable to achieve your requirement of nested level of json value fields in Web API Datasource hence we have logged a feature request on this, and it can be tracked through our feedback portal below.     
    
    
At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented.   
    
If you have any more specification/suggestions to the feature request you can add it as a comment in the portal.   
 
2. When creating web api data source I can not see "API query builder" and "Code Mode" as per your example here there are many options which are not visible to me: https://help.syncfusion.com/report-platform/reportdesigner/web/how-to/web-api-datasource 
We need to pass the queryDesignerOption for report designer to show the query builder as shown in below code example. 
 
<script type="text/javascript"> 
    var isSubmit = true; 
    var webApiQueryDialog = null; 
    var qryOptions = null; 
    $(function () { 
        $(document.body).bind('submit', $.proxy(formSubmit, this)); 
        $(window).bind('beforeunload', $.proxy(windowUnload, this)); 
    }); 
 
    function controlInitialized(args) { 
 
        if (ej.isNullOrUndefined(webApiQueryDialog)) { 
            webApiQueryDialog = new QueryInputDialog($('#reportdesigner1')); 
        } 
 
        if (!ej.isNullOrUndefined(webApiQueryDialog)) { 
            qryOptions = { 
                toolbarRendering: $.proxy(webApiQueryDialog.renderToolbarItems, webApiQueryDialog), 
                datasetLoaded: $.proxy(webApiQueryDialog.enableButton, webApiQueryDialog), 
                dataModeChanged: $.proxy(webApiQueryDialog.enableButton, webApiQueryDialog) 
            }; 
        } 
 
        var designer = $('#reportdesigner1').data('ejReportDesigner'); 
        designer.isCoreService = true; 
        designer.model.queryDesignerOptions = qryOptions; 
    } 
 
    function formSubmit(args) { 
        isSubmit = false; 
    } 
 
    function windowUnload(args) { 
        var designer = $('#reportdesigner1').data('ejReportDesigner'); 
        if (designer.hasReportChanges() && isSubmit) { 
            return 'Changes you made may not be saved' 
        } 
        isSubmit = true; 
    } 
</script> 
 
3. I want to load the report rdl files dynamically when user views a certain report. When I try to load the report using the stream in this method: public void OnReportLoaded(ReportViewerOptions reportOption) using code reportOption.ReportModel.Stream the report still expects a file path and shows error that file not found. 
We can able to change the report path and render the report in same controller. We can able We have prepared the simple sample with drop down list to change the report dynamically when using the setModel method in client side. and it can be downloaded from below location.  
 
Please find the below code example for how to change the reports using setModel method in client side.  
Index.cshtml  
@using Syncfusion.JavaScript  
@{  
    ViewData["Title"] = "Syncfusion ReportViewer control";  
}  
<select id="dropdown1">  
    <option value="GroupingAgg">GroupingAgg</option>  
    <option value="Sales Order Detail">Sales Order Detail</option>  
</select>  
  
<div style="align-items:flex-start; height:100px;width:100px">  
    <ej-drop-down-list id="dropdown1" selected-item-index="0" change="onChange"></ej-drop-down-list>  
</div>  
<div style=" align-items:center; height:525px;width: 100%;">  
    <ej-report-viewer id="reportviewer1" report-service-url="../Home" report-path="/ReportsTemplate/GroupingAgg.rdl"processing-mode="Remote" />  
</div>  
  
<script type="text/javascript">  
  
        function onChange(args) {  
            reportpath = "/ReportsTemplate/" + args.selectedValue + ".rdl";  
            var reportObject = $("#reportviewer1").data("ejReportViewer");  
            reportObject.setModel({  
                reportPath: reportpath  
    });  
}  
</script>  
  
<ej-script-manager></ej-script-manager>  
 
Please find the below code example for how to pass that report path to get the stream in controller side.  
HomeController.cs  
        public void OnInitReportOptions(ReportViewerOptions reportOption)  
        {  
            string basePath = _hostingEnvironment.WebRootPath;  
            FileStream inputStream = new FileStream(basePath + reportOption.ReportModel.ReportPath, FileMode.Open, FileAccess.Read);  
            reportOption.ReportModel.Stream = inputStream;  
        }  
 
Note: In above sample we have achieve to change the reports dynamically. Could you please modify above sample with your requirement.  
 
4. Dynamically adding headers to report viewer and designer for example we need to add JWT token header for the logged in user. Where do we add that when the report viewer or designer is being opened? 
We can able to get the customer header from client to server using ajaxBeforeLoad event as shown in below code examples in ASP.NET Core application for report viewer and report designer. 
 
Default.aspx: 
    <ej-report-viewer id="reportviewer1" report-service-url="../Home" processing-mode="Local" rendering-begin="renderingBegin" ajax-before-load="ajaxBeforeLoad" /> 
    <script type="text/javascript"> 
        function ajaxBeforeLoad(event) { 
        event.headers.push({ Key: 'Authorization', Value: "BearerMyToken" }) ;                       
    } 
</script> 
 
ReportApiController.cs 
        public string HeaderContent = null; 
 
        public object PostReportAction(Dictionary<string, object> jsonResult) 
        { 
            if (jsonResult != null) 
            { 
                HeaderContent = HttpContext.Current.Request.Headers["Authorization"]; 
            } 
 
            return ReportHelper.ProcessReport(jsonResult, this); 
        } 
 
 
Regards, 
Vinoth S. 


IS Isheanesu September 18, 2019 06:13 PM UTC

Hello, I followed the above instructions in a React Frontend & ASP.NET Core Application and it throws this exception:

Sf_Exception - System.ArgumentNullException: Value cannot be null.Parameter name: source   at System.Linq.Enumerable.Any[TSource](IEnumerable`1 source)   at Syncfusion.Reporting.Web.ReportDesigner.DataProvider.GetDataExtensions()   at Syncfusion.Reporting.Web.ReportDesigner.Internal.ReportDesignerInternalHelper.ProcessDesigner()

What might I be doing wrong?

VS Vinoth Srinivasan Syncfusion Team September 19, 2019 06:39 AM UTC

Hi Isheanesu, 
 
The mentioned issue occurs when we did not configured the WebAPI extension in ASP.NET Core Web API service application. So could you please confirm you have added the below code in your application. 
 
App.config  
<?xml version="1.0" encoding="utf-8" ?> 
<configuration> 
  <configSections> 
    <section name="ReportingExtensions" type="Syncfusion.Reporting.Extensions.Configuration.Extensions, Syncfusion.Reporting.Web" allowLocation="true" allowDefinition="Everywhere" /> 
  </configSections> 
 
  <ReportingExtensions> 
    <DataExtension> 
      <Extension Name="WebAPI" Assembly="Syncfusion.Reporting.DataExtensions.WebAPI" Type="Syncfusion.Reporting.DataExtensions.WebAPI.WebAPIExtension"> 
        <Properties> 
          <Add Key="QueryDesignerEnabled" Value="true"/> 
          <Add Key="QueryFilterEnabled" Value="false"/> 
          <Add Key="QueryExpressionEnabled" Value="false"/> 
          <Add Key="QueryJoinerEnabled" Value="false"/> 
          <Add Key="QueryColumnEdit" Value="false"/> 
        </Properties> 
      </Extension> 
    </DataExtension> 
  </ReportingExtensions> 
</configuration> 
 
 
If issue still persists then could you please share your issue reproducible application to validate the mentioned problem at our end. 
 
Regards, 
Vinoth S. 


IS Isheanesu September 19, 2019 08:21 AM UTC

Yes I manually added the app.config file. The service application only had an appsettings.json file.

IS Isheanesu September 19, 2019 10:59 AM UTC

Managed to find the problem, had conflicting Syncfusion nuget packages. So removed one of them it now works

VS Vinoth Srinivasan Syncfusion Team September 19, 2019 12:36 PM UTC

Hi Isheanesu, 
 
Thanks for your update. Please let us know if you require further assistance. 
 
Regards, 
Vinoth S. 


IS Isheanesu September 19, 2019 05:52 PM UTC

After adding the API connection I get this exception:

Sf_Exception - Exception occurred at Service Request: Response Status: NotFound

What might be the cause?

VS Vinoth Srinivasan Syncfusion Team September 20, 2019 05:50 AM UTC

Hi Isheanesu, 

The mentioned issue occurs when your shared Web API Datasource URL is not found. So could you please check the data retrieved or not with your Web API datasource in GetData method in WebAPIExtension class file as shown in below snap and you can customize the Web API extension based on your Web API URL at your end. 
 
 
 
Regards, 
Vinoth S. 


Loader.
Live Chat Icon For mobile
Up arrow icon