Search results
Suggest a FeaturePDF

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/6.1.34/content/v2.0/tailwind-light/bold.report-designer.min.css" rel="stylesheet" />
    
        <!-- Report Designer component dependent scripts -->
        <script src="https://cdn.boldreports.com/6.1.34/scripts/v2.0/common/bold.reports.common.min.js"></script>
        <script src="https://cdn.boldreports.com/6.1.34/scripts/v2.0/common/bold.reports.widgets.min.js"></script>
    
        <!-- Report Viewer and Designer component scripts -->
        <script src="https://cdn.boldreports.com/6.1.34/scripts/v2.0/bold.report-viewer.min.js"></script>
        <script src="https://cdn.boldreports.com/6.1.34/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/6.1.34/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/6.1.34/scripts/v2.0/common/bold.reports.common.min.js"></script>
    <script src="https://cdn.boldreports.com/6.1.34/scripts/v2.0/common/bold.reports.widgets.min.js"></script>

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

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