Bold Reports Report Viewer with Syncfusion Controls
Hi guys, I'm trying to use the bold reports report viewer in a project where I use syncfusion controls, following the documentation guide at https://help.boldreports.com/report-viewer-sdk/blazor-reporting/report-viewer/how-to/use-bold-reports-with-syncfusion-blazor/, I add the scripts and styles of the viewer, but that alters the styles of the entire site, I'm using the syncfusion fabric theme for my controls.
I also tried to follow the instructions from this link https://help.boldreports.com/embedded-reporting/faq/bold-reports-with-ej2-controls/?_gl=1*cth728*_ga*MjA4MzM0Njg3Ny4xNzI2MDA1NDg5*_ga_QBBJGZHXXJ*MTcyNjA3MDE2MS4zLjEuMTcyNjA3MjEyMy41Ny4wLjA.
and it works halfway, it respects the style of some controls, but not others, for example the grid looks altered and it removes the color of the column headers.
Here I add the lines from my App.razor file
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base rel='nofollow' href="/" />
<link rel="stylesheet" rel='nofollow' href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" rel='nofollow' href="app.css" />
<link rel="stylesheet" rel='nofollow' href="SanFrancisco.Server.styles.css" />
<link rel="stylesheet" rel='nofollow' href="_content/Syncfusion.Blazor.Themes/fabric.css" />
<link rel="icon" type="image/png" rel='nofollow' href="favicon.png" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
@* BoldReports Styles *@
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/styles/compatibility/fabric.css" rel="stylesheet" />
<link rel='nofollow' href="https://cdn.boldreports.com/6.2.32/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" />
<link rel='nofollow' href="https://cdn.boldreports.com/6.2.32/content/fabric/bold.theme.compatibility.min.css" rel="stylesheet" />
@* Syncfusion Essential JS 2 Styles *@
<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/styles/compatibility/fabric.css" />
@* BoldReports Styles *@
<link rel='nofollow' href="https://cdn.boldreports.com/6.2.32/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" />
<link rel='nofollow' href="https://cdn.boldreports.com/6.2.32/content/fabric/bold.theme.compatibility.min.css" rel="stylesheet" />
@*Default scripts*@
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
@* Syncfusion Essential JS 2 Scripts *@
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
@* BoldReports Scripts *@
<script src="https://cdn.boldreports.com/6.2.32/scripts/common/bold.reports.common.min.js"></script>
<script src="https://cdn.boldreports.com/6.2.32/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/6.2.32/scripts/data-visualization/ej.chart.min.js"></script>
<!-- Report Viewer component script-->
<script src="https://cdn.boldreports.com/6.2.32/scripts/bold.report-viewer.min.js"></script>
<HeadOutlet @rendermode="@InteractiveServer" />
</head>
any idea why this could be happening? Thankyou very much.
