Migrate Report Viewer application

In our Syncfusion® new assemblies are introduced for both client and server-side to resolve the compatibility problem between Essential Studio Report Viewer versions. It has changes in both Web API service and client-side scripts.

This section provides step-by-step instructions for migrating Report Viewer from Syncfusion® Essential Studio release version to Syncfusion® version of Angular Report Viewer application:

Server-side migration

  1. In the Solution Explorer, right-click the References and remove the Syncfusion.EJ.ReportViewer assembly reference.
  2. Add the assembly from the Syncfusion® NuGet package BoldReports.Web. To add from NuGet, right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Search for BoldReports.Web NuGet package, and then install in your application.

Refer to the NuGet Packages section to learn more details about installing and configuring Report Viewer NuGet packages.

Web API Controller

  1. The IReportController interface is moved to BoldReports.Web.ReportViewer. Open the Report Viewer Web API Controller file and remove the following using statement.

    using Syncfusion.EJ.ReportViewer;

  2. Add the following using statement.

    using BoldReports.Web.ReportViewer;

Your application is successfully upgraded to the latest version of Report Viewer, and you can run the application with new assemblies.

Report export configuration

Now, the BoldReports.Web can export the reports with data visualization components only using web components. It is mandatory to configure the web scripts in Report Viewer Web API controller for exporting data visualization components such as chart, gauge, and map that are used in report definition. To configure the scripts in Web API, refer to the following steps:

  1. Open the Report Viewer Web API controller.

  2. Configure the following scripts and styles in OnInitReportOptions on Web API controller:

    • jquery.min.js
    • bold.reports.common.min.js
    • bold.reports.widgets.min.js
    • bold.report-viewer.min.js

  3. Replace the following codes in Report Viewer Web API controller.

    [NonAction]
public void OnInitReportOptions(ReportViewerOptions reportOption)
{
    var resourcesPath = System.Web.Hosting.HostingEnvironment.MapPath("~/Scripts");

    reportOption.ReportModel.ExportResources.Scripts = new List<string>
    {
        resourcesPath + @"\bold-reports\v2.0\common\bold.reports.common.min.js",
        resourcesPath + @"\bold-reports\v2.0\common\bold.reports.widgets.min.js",
        //Report Viewer Component Script
        resourcesPath + @"\bold-reports\v2.0\bold.report-viewer.min.js"
    };

    reportOption.ReportModel.ExportResources.DependentScripts = new List<string>
    {
        "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
    };
}

    The data visulization components will not export without the above script configurations.