Search results
PDF

Migrate to Report Designer v2.0 component

This section provides simple step-by-step instructions to update your existing Report Designer component to our latest v2.0 component.

  1. Open the Pages/_Host.cshtml page that contains Report Designer and its scripts.

  2. 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
  3. 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
  4. 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/5.4.20/content/v2.0/tailwind-light/bold.report-designer.min.css" rel="stylesheet" />

    <!-- Report Designer component dependent scripts -->
    <script src="https://cdn.boldreports.com/5.4.20/scripts/v2.0/common/bold.reports.common.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/scripts/v2.0/common/bold.reports.widgets.min.js"></script>

    <!-- Report Viewer and Designer component scripts -->
    <script src="https://cdn.boldreports.com/5.4.20/scripts/v2.0/bold.report-viewer.min.js"></script>
    <script src="https://cdn.boldreports.com/5.4.20/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/5.4.20/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/5.4.20/scripts/v2.0/common/bold.reports.common.min.js"></script>
  <script src="https://cdn.boldreports.com/5.4.20/scripts/v2.0/common/bold.reports.widgets.min.js"></script>

  <!-- Report Viewer and Designer component scripts -->
  <script src="https://cdn.boldreports.com/5.4.20/scripts/v2.0/bold.report-viewer.min.js"></script>
  <script src="https://cdn.boldreports.com/5.4.20/scripts/v2.0/bold.report-designer.min.js"></script>

  <!-- Blazor interop file -->
  <script src="~/scripts/boldreports-interop.js"></script>
</head>
<body>
  ....
  ....
</body>
</html>
  ```