This section provides simple step-by-step instructions to update your existing Report Designer component to our latest v2.0 component.
This section explains migration steps to migrate Bold Report Designer version lesser than
v5.2.xx
tov5.2.xx
and above.
Open the Pages/_Host.cshtml
page that contains Report Designer and its scripts.
Remove the following older CSS references from the head section of your Pages/_Host.cshtml
page.
bold.reports.all.min.css
bold.reportdesigner.min.css
Remove the following older script references from the head section of your Pages/_Host.cshtml
page.
jsrender.min.js
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
ej2-maps.min.js
ej.chart.min.js
bold.reports.common.min.js
bold.reports.widgets.min.js
bold.report-designer-widgets.min.js
bold.report-viewer.min.js
bold.report-designer.min.js
Add the following v2.0 CSS and script references in the head section of your Pages/_Host.cshtml
page.
<!-- Report Designer component styles -->
<link href="https://cdn.boldreports.com/7.1.9/content/v2.0/tailwind-light/bold.report-designer.min.css" rel="stylesheet" />
<!-- Report Designer component dependent scripts -->
<script src="https://cdn.boldreports.com/7.1.9/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/7.1.9/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<!-- Report Viewer and Designer component scripts -->
<script src="https://cdn.boldreports.com/7.1.9/scripts/v2.0/bold.report-viewer.min.js"></script>
<script src="https://cdn.boldreports.com/7.1.9/scripts/v2.0/bold.report-designer.min.js"></script>
<!-- Blazor interop file -->
<script src="~/scripts/boldreports-interop.js"></script>
The final updated Pages/_Host.cshtml
page for v2.0 Report Designer appears like this.
....
....
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebApplication1</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
<link href="https://cdn.boldreports.com/7.1.9/content/v2.0/tailwind-light/bold.report-designer.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/vb/vb.min.js" type="text/javascript"></script>
<!-- Report Designer component dependent scripts -->
<script src="https://cdn.boldreports.com/7.1.9/scripts/v2.0/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/7.1.9/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
<!-- Report Viewer and Designer component scripts -->
<script src="https://cdn.boldreports.com/7.1.9/scripts/v2.0/bold.report-viewer.min.js"></script>
<script src="https://cdn.boldreports.com/7.1.9/scripts/v2.0/bold.report-designer.min.js"></script>
<!-- Blazor interop file -->
<script src="~/scripts/boldreports-interop.js"></script>
</head>
<body>
....
....
</body>
</html>