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 \Views\Shared\_Layout.cshtml page that contains Report Designer and its scripts.

  2. Remove the following older CSS references from your _Layout.cshtml page.

    • bold.reports.all.min.css
    • bold.reportdesigner.min.css
  3. Remove the following older script references from your _Layout.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 your _Layout.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>
    

The final updated _Layout.cshtml page for v2.0 Report Designer appears like this.

  <!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <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>
  </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>
  ```