When using the Bold Reporting components with Syncfusion Blazor components. You have to refer the Syncfusion Blazor script in _Host.cshtml
file. Follow these steps in your application.
Refer the Syncfusion Blazor script in _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 mentioned as follows.
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
....
....
services.AddSyncfusionBlazor();
}
}
For Style, you need to refer the compatibility styles of EJ2 from Bold Reports and Bold Reports styles should be referred after EJ2 styles.
<link href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" rel="stylesheet" />
<link href="https://cdn.boldreports.com/5.4.20/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" />
<link href="https://cdn.boldreports.com/5.4.20/content/material/bold.theme.compatibility.min.css" rel="stylesheet" />
You should refer EJ2 scripts before Bold Reports scripts as follows.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BoldReports ReportViewer and EJ2 controls</title>
@* Syncfusion Essential JS 2 Styles *@
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" />
@* BoldReports Styles *@
<link href="https://cdn.boldreports.com/5.4.20/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" />
<link href="https://cdn.boldreports.com/5.4.20/content/material/bold.theme.compatibility.min.css" rel="stylesheet" />
@*Default scripts*@
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
@* Syncfusion Essential JS 2 Scripts *@
<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"></script>
@* BoldReports Scripts *@
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/5.4.20/scripts/common/bold.reports.widgets.min.js"></script>
<!--Used to render the chart item. Add this script only if your report contains the chart report item.-->
<script src="https://cdn.boldreports.com/5.4.20/scripts/data-visualization/ej.chart.min.js"></script>
<!-- Report Viewer component script-->
<script src="https://cdn.boldreports.com/5.4.20/scripts/bold.report-viewer.min.js"></script>
</head>
Please consult the provided link to learn how to migrate to the Report Viewer V2.0 component.