1. Home
  2. Forum
  3. Report Platform
  4. In Blazor, the style changes when I add the Bold Report CDN to the _Host file.
If you became a customer of the Syncfusion� Reporting Platform or the Report Viewer, Report Designer, or Report Writer components before October 2019 and have questions related to those products, you can request support through our forum system. However, please note that this support system is only for existing customers who are still using the Syncfusion� Reporting Platform or its components and not for new customers looking for reporting products from Syncfusion�.

For new customers or those with general reporting questions, we recommend contacting our support team at https://support.boldreports.com/, which is a separate brand created by Syncfusion� for its reporting solutions. Our team will be happy to assist you with any questions you may have.

Thank you for choosing Syncfusion� for your reporting needs.

In Blazor, the style changes when I add the Bold Report CDN to the _Host file.

Hi.
I can't speak English. So I use Google Translate.
Please understand if the explanation is not natural.

I am adding Report Viewer by referring to this post.
However, if you add a CDN to the _Host file, the overall style is changed.
I made a simple sample and captured it.

- Without CDN -


- With CDN -


The capture only displayed Grid, but in reality, the styles of all controls were changed.
Is there a way to keep the original style unchanged?
Any help would be appreciated.


5 Replies 1 reply marked as answer
MR Manoranjan Rajendran Syncfusion Team November 5, 2020 08:53 AM UTC

Hi JaeHyeong, 
 
We have validated the reported issue. When using the Bold Reporting components with Syncfusion Blazor components, you need to refer the compatibility styles of EJ2 from Bold Reports and Bold Reports styles and also you should refer EJ2 scripts before Bold Reports scripts. Please refer the below compatibility styles and Scripts order in _Host.cshtml file to avoid this styles issue. 
 
   // compatibility styles 
    <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" /> 
    <link rel='nofollow' href="https://cdn.boldreports.com/2.4.10/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" /> 
    <link rel='nofollow' href="https://cdn.boldreports.com/2.4.10/content/material/bold.theme.compatibility.min.css" rel="stylesheet" /> 
     
   //Script orders 
    <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="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"></script> 
 
We have prepared sample for this and its available in below link
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorAppTreeViewWithBoldReport-1595708726  
 
If still issue persists at your end then could you please share your issue reproduceable sample to validate the mentioned problem at our end.  
 

Regards, 
Manoranjan R 


JJ JaeHyeong Jang November 6, 2020 01:20 AM UTC

Hi.
Thank you for quick response.

I tested the sample.
But still the style has changed.
I am using bootstrap4 theme.
I am not in a situation where I can change the theme.
Can't I use Report while keeping bootstrap4 theme?

And the TreeView and DatePicker in the sample don't work.
I did a test by adding a DropDownList to the Index page.
DropDownList also didn't work.

Any help to me would be appreciated.



MR Manoranjan Rajendran Syncfusion Team November 6, 2020 10:07 AM UTC

Hi JaeHyeong 
 
Please find the details below table, 
 
Query 
Details 
I tested the sample. 
But still the style has changed. 
 
We have prepared the new sample for reported issues. Please check this sample and if still issue occurs in your end could you please share the issue reproduceable sample for our validation.  
I am using bootstrap4 theme. 
I am not in a situation where I can change the theme. 
Can't I use Report while keeping bootstrap4 theme? 
 
Yes, you can use the bootstrap4 theme for Bold Reports . If you are using bold reports with Syncfusion Blazor components.  Please use the below styles. 
// Bold Reports with Bootstrap4  
<link rel='nofollow' href="https://cdn.boldreports.com/2.4.10/content/bootstrap4/bold.reports.all.min.css" rel="stylesheet" /> 
// Compatibility  styles.
<link rel='nofollow' href="https://cdn.syncfusion.com/blazor/18.3.47/styles/bootstrap4.css" rel="stylesheet" /> 
    <link rel='nofollow' href="https://cdn.boldreports.com/2.4.10/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" /> 
    <link rel='nofollow' href="https://cdn.boldreports.com/2.4.10/content/bootstrap4/bold.theme.compatibility.min.css" rel="stylesheet" /> 
And the TreeView and DatePicker in the sample don't work. 
I did a test by adding a DropDownList to the Index page. 
DropDownList also didn't work. 
 
We have fixed this issue in our volume 3 SP1 release. Please update the Syncfusion.Blazor component version 18.3.0.47 . We have prepared the sample for this. Could you please check this sample and if still issue occurs in your end could you please share the issue reproduceable sample for our validation. 
 
  
 
 
Regards, 
Manoranjan R 


Marked as answer
JJ JaeHyeong Jang November 7, 2020 12:41 AM UTC

Hi.

I checked your sample.
It works perfectly.
I will contact you again if there is anything wrong after applying this to my project.

Thank you so much for helping me.
Have a nice weekend

MR Manoranjan Rajendran Syncfusion Team November 7, 2020 02:08 AM UTC

Hi JaeHyeong, 
 
Thanks for the update, 
 
Please let us know if you need any clarification. 
 
Regards, 
Manoranjan R 


Loader.
Up arrow icon