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 \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>