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 Core Report Viewer application:
To uninstall NuGet, right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Search the Syncfusion.EJ.ASPNET.Core
NuGet Package and uninstall from your application.
Search for BoldReports.AspNet.Core
NuGet package, and install to your application.
Refer to the NuGet Packages section to learn more details about installing and configuring Report Viewer NuGet packages.
Remove the following scripts and CSS references from the Report Viewer \Views\Shared\_Layout.cshtml
page:
ej.web.all.min.css
ej.web.all.min.js
Add the listed references in the same order given in above list. You can replace the following code in your \Views\Shared\_Layout.cshtml
page <head>
tag.
<link href="https://cdn.boldreports.com/5.4.20/content/material/bold.reports.all.min.css" rel="stylesheet" />
<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.widgets.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/bold.report-viewer.min.js"></script>
The component prefix has been changed from ej
to sf
.
Open the \Views\Shared\_Layout.cshtml
page.
Remove the following code <ej-script-manager></ej-script-manager>
in your _Layout.cshtml
page.
Replace the following code in your _Layout.cshtml
page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - ReportViewerDemo</title>
<link href="https://cdn.boldreports.com/5.4.20/content/material/bold.reports.all.min.css" rel="stylesheet" />
<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.widgets.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/bold.report-viewer.min.js"></script>
</head>
<body>
<div style="min-height: 600px;width: 100%;">
@RenderBody()
</div>
@RenderSection("Scripts", required: false)
<!-- Bold Reports script manager -->
<bold-script-manager></bold-script-manager>
</body>
</html>
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, 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 \Views\Shared\_Layout.cshtml
page as demonstrated in the following code sample.
<link href="https://cdn.boldreports.com/5.4.20/content/material/bold.reports.all.min.css" rel="stylesheet" />
<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
<!-- Report Viewer component script-->
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.widgets.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej.chart.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/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="https://cdn.boldreports.com/5.4.20/content/material/bold.reports.all.min.css" rel="stylesheet" />
<script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script>
<!--Render the gauge item. Add this script only if your report contains the gauge report item. -->
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-base.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-data.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-pdf-export.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/ej2-svg-base.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej2-lineargauge.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej2-circulargauge.min.js"></script>
<!--Render the map item. Add this script only if your report contains the map report item.-->
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej2-maps.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.widgets.min.js"></script>
<!--Render the chart item. Add this script only if your report contains the chart report item.-->
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej.chart.min.js"></script>
<!-- Report Viewer component script-->
<script src="https://cdn.boldreports.com/5.4.20/scripts/bold.report-viewer.min.js"></script>
Remove following tag helper within the _ViewImports.cshtml
page.
@using Syncfusion.JavaScript
@addTagHelper *, Syncfusion.EJ
Add following tag helper within the _ViewImports.cshtml
page.
@using BoldReports.TagHelpers
@addTagHelper *, BoldReports.AspNet.Core
The component prefix has been changed from ej-report-viewer
to bold-report-viewer
.
Open the Report Viewer CSHTML page.
Replace the component tag ej-report-viewer
to bold-report-viewer
.
<bold-report-viewer id="viewer"></bold-report-viewer>
If your application contains Report Viewer initialization in multiple pages then replace in all the pages.
To uninstall NuGet, right-click the project or solution in the Solution Explorer tab, and choose Manage NuGet Packages. Search the Syncfusion.EJ.ReportViewer.ASPNET.Core
NuGet Package and uninstall from your application.
Search for BoldReports.Net.Core
NuGet package, and install to your application.
Refer to the NuGet Packages section to learn more details about installing and configuring Report Viewer NuGet packages.
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.