Search results

Migrate Report Viewer application

In our Bold Reports 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 Bold Reports version of ASP.NET Web Forms Report Viewer application:

Client-side migration

In the Solution Explorer, right-click the References and remove the following assembly references:
- Syncfusion.EJ
- Syncfusion.EJ.Web
Add the assembly from the Bold Reports NuGet package BoldReports.WebForms. To add from NuGet, right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Search for BoldReports.WebForms NuGet package, and install in your application.

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

Scripts and CSS references

Remove the following scripts and CSS references from the Report Viewer Default.aspx page.
- ej.web.all.min.css
- ej.web.all.min.js

The Report Viewer scripts and style sheets are added to the Scripts and Content folders in your application when installing the BoldReports.WebForms NuGet package. Add scripts as in the following code sample.

<link href="Content/bold-reports/material/bold.reports.all.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Scripts/bold-reports/common/bold.reports.common.min.js"></script>
<script src="Scripts/bold-reports/common/bold.reports.widgets.min.js"></script>
<script src="Scripts/bold-reports/bold.report-viewer.min.js"></script>

Adding data visualization scripts

To render the report with data visualization components such as chart, gauge, and map items, add scripts of the visualization element. The following table shows the script reference that needs to be added in Report Viewer page for data visualization elements.

Visualization item	Script file
Gauge	ej2-base.min.js, ej2-data.min.js, ej2-pdf-export.min.js, ej2-svg-base.min.js, ej2-lineargauge.min.js and ej2-circulargauge.min.js
Map	ej2-maps.min.js
Chart	ej.chart.min.js

To render the chart report item, add chart control script ej.chart.min.js before the bold.report-viewer.min.js reference in the Default.aspx page as demonstrated in the following code sample.

<link href="Content/bold-reports/material/bold.reports.all.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Scripts/bold-reports/common/bold.reports.common.min.js"></script>
<script src="Scripts/bold-reports/common/bold.reports.widgets.min.js"></script>

<!--Used to render the chart item. Add this script only if your report contains the chart report item.-->
<script src="Scripts/bold-reports/data-visualization/ej.chart.min.js"></script>

<!-- Report Viewer component script-->
<script src="Scripts/bold-reports/bold.report-viewer.min.js"></script>

The following code can be used to render the chart, gauge, and map report items in Report Viewer.

<link href="Content/bold-reports/material/bold.reports.all.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>

<!--Used to render the gauge item. Add this script only if your report contains the gauge report item. -->
<script src="Scripts/bold-reports/common/ej2-base.min.js"></script>
<script src="Scripts/bold-reports/common/ej2-data.min.js"></script>
<script src="Scripts/bold-reports/common/ej2-pdf-export.min.js"></script>
<script src="Scripts/bold-reports/common/ej2-svg-base.min.js"></script>
<script src="Scripts/bold-reports/data-visualization/ej2-lineargauge.min.js"></script>
<script src="Scripts/bold-reports/data-visualization/ej2-circulargauge.min.js"></script>

<!--Used to render the map item. Add this script only if your report contains the map report item.-->
<script src="Scripts/bold-reports/data-visualization/ej2-maps.min.js"></script>

<script src="Scripts/bold-reports/common/bold.reports.common.min.js"></script>
<script src="Scripts/bold-reports/common/bold.reports.widgets.min.js"></script>

<!--Used to render the chart item. Add this script only if your report contains the chart report item.-->
<script src="Scripts/bold-reports/data-visualization/ej.chart.min.js"></script>

<!-- Report Viewer component script-->
<script src="Scripts/bold-reports/bold.report-viewer.min.js"></script>

Control initialization

The component prefix has been changed from ej to Bold.

Open the Web.config file and add the BoldReports.WebForms assembly reference to the <system.web.pages.controls> element with Bold tag prefix.

<configuration>
    ....
    ....
    <system.web>
        ....
        <pages>
        ....
        <controls>
            <add assembly="BoldReports.WebForms" namespace="BoldReports.WebForms" tagPrefix="Bold" />
            ....
        </controls>
        </pages>
    </system.web>
    ....
    ....
</configuration>

Open the Report Viewer component page.
Replace the tag ej:ReportViewer as Bold:ReportViewer.
```
<div style="height: 650px;width: 950px;min-height:404px;">
    <Bold:ReportViewer runat="server" ID="viewer">
    </Bold:ReportViewer>
</div>
```
If your application contains Report Viewer initialization in multiple pages then replace in all the pages.

Server-side migration

In the Solution Explorer, right-click the References and remove the Syncfusion.EJ.ReportViewer assembly reference.
Add the assembly from the Bold Reports 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

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;
```
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:

Open the Report Viewer Web API controller.
Configure the following scripts and styles in OnInitReportOptions on Web API controller:
- jquery-1.10.2.min.js
- ej2-base.min.js, ej2-data.min.js, ej2-pdf-export.min.js, ej2-svg-base.min.js, ej2-lineargauge.min.js and ej2-circulargauge.min.js - Exports the gauge item. Add this script only if your report contains the gauge report item.
- ej2-maps.min.js - Exports the map item. Add this script only if your report contains the map report item.
- bold.reports.common.min.js
- bold.reports.widgets.min.js
- ej.chart.min.js - Exports the chart item. Add this script only if your report contains the chart report item.
- bold.report-viewer.min.js

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>
    {
        //Gauge component scripts
        resourcesPath + @"\bold-reports\common\ej2-base.min.js",
        resourcesPath + @"\bold-reports\common\ej2-data.min.js",
        resourcesPath + @"\bold-reports\common\ej2-pdf-export.min.js",
        resourcesPath + @"\bold-reports\common\ej2-svg-base.min.js",
        resourcesPath + @"\bold-reports\data-visualization\ej2-lineargauge.min.js",
        resourcesPath + @"\bold-reports\data-visualization\ej2-circulargauge.min.js",
        //Map component script
        resourcesPath + @"\bold-reports\data-visualization\ej2-maps.min.js",
        resourcesPath + @"\bold-reports\common\bold.reports.common.min.js",
        resourcesPath + @"\bold-reports\common\bold.reports.widgets.min.js",
        //Chart component script
        resourcesPath + @"\bold-reports\data-visualization\ej.chart.min.js",
        //Report Viewer Script
        resourcesPath + @"\bold-reports\bold.report-viewer.min.js"
    };

    reportOption.ReportModel.ExportResources.DependentScripts = new List<string>
    {
        resourcesPath + @"\jquery-1.7.1.min.js"
    };
}

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

Contents

Client-side migration
Scripts and CSS references
Adding data visualization scripts
Control initialization
Server-side migration
Web API Controller
Report export configuration

Having trouble getting help?Contact Support

Contents

Client-side migration
Scripts and CSS references
Adding data visualization scripts
Control initialization
Server-side migration
Web API Controller
Report export configuration

Having trouble getting help?Contact Support

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!