How to use Bold Reports® with Syncfusion® Blazor

To use the Bold Reports® Blazor components with Syncfusion® Blazor components, refer the Syncfusion® Blazor script in the _Host.cshtml file, register the Syncfusion® Blazor service, and refer the EJ2 scripts before the Bold Reports® scripts. Follow these steps in your application.

Refer the Syncfusion® Blazor script in the _Host.cshtml file.

<head>
<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"></script>
</head>

To use manual scripts in the application, register the Blazor service in ~/Startup.cs file by using the true parameter, as in the following code:

    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            ....
            ....
            services.AddSyncfusionBlazor();
        }
    }

Refer the EJ2 scripts before the Bold Reports® scripts, as in the following code:

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>BoldReports ReportViewer and EJ2 controls</title>
        @* BoldReports Styles *@
        <link href="https://cdn.boldreports.com/15.1.10/content/v2.0/tailwind-light/bold.report-viewer.min.css" rel="stylesheet" />
        @*Default scripts*@
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        @* Syncfusion<sup>®</sup> Essential JS 2 Scripts *@
        <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"></script>
        @* BoldReports Scripts *@
        <script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.common.min.js"></script>
        <script src="https://cdn.boldreports.com/15.1.10/scripts/v2.0/common/bold.reports.widgets.min.js"></script>

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

See also