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.

This section explains migration steps to migrate Bold Report Designer version lesser than v5.2.xx to v5.2.xx and above.

  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 -->
    @Styles.Render("~/Content/bold-reports/v2.0/tailwind-light/bold.report-designer.min.css")

    <!-- Report Designer component dependent scripts -->
    @Scripts.Render("~/Scripts/bold-reports/v2.0/common/bold.reports.common.min.js")
    @Scripts.Render("~/Scripts/bold-reports/v2.0/common/bold.reports.widgets.min.js")

    <!-- Report Viewer and Designer component scripts-->
    @Scripts.Render("~/Scripts/bold-reports/v2.0/bold.report-viewer.min.js")
    @Scripts.Render("~/Scripts/bold-reports/v2.0/bold.report-designer.min.js")

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">
        <title>@ViewBag.Title - My ASP.NET Application</title>

        <!-- Report Designer component styles -->
        @Styles.Render("~/Content/bold-reports/v2.0/tailwind-light/bold.report-designer.min.css")

        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/bootstrap")
        @Scripts.Render("~/Scripts/CodeMirror/lib/codemirror.js")
        @Scripts.Render("~/Scripts/CodeMirror/addon/hint/show-hint.js")
        @Scripts.Render("~/Scripts/CodeMirror/addon/hint/sql-hint.js")
        @Scripts.Render("~/Scripts/CodeMirror/mode/sql/sql.js")
        @Scripts.Render("~/Scripts/CodeMirror/mode/vb/vb.js")

        <!-- Report Designer component dependent scripts -->
        @Scripts.Render("~/Scripts/bold-reports/v2.0/common/bold.reports.common.min.js")
        @Scripts.Render("~/Scripts/bold-reports/v2.0/common/bold.reports.widgets.min.js")

        <!-- Report Viewer and Designer component scripts-->
        @Scripts.Render("~/Scripts/bold-reports/v2.0/bold.report-viewer.min.js")
        @Scripts.Render("~/Scripts/bold-reports/v2.0/bold.report-designer.min.js")
    </head>
    <body>
        <div style="height: 600px;width: 100%;">
            @RenderBody()
        </div>
        @RenderSection("scripts", required: false)
        <!-- Bold Reporting ScriptManager -->
        @Html.Bold().ScriptManager()
    </body>
    </html>