Compatibility of EJ2 with Bold Reports Themes
Integrating Syncfusion controls (EJ2) with Bold Reports may lead to CSS compatibility issues. To avoid these issues, it’s essential to use the compatibility theme and ensure consistency by applying the same compatibility theme in both Syncfusion and Bold Reports. Bold Reports provides a compatibility theme that aligns with various popular themes. Below is a list of compatible themes:
List of Compatible Themes
The following themes are compatible with Bold Reports:
- Bootstrap theme
- Bootstrap4 theme
- Material theme
- High Contrast 01 theme
- High Contrast 02 theme
- Office 365 theme
Each theme is designed to enhance the user interface of the Report Viewer, catering to different preferences and accessibility standards.
Applying a Theme
To apply a theme, include a compatibility script that aligns the Report Viewer’s styling with the selected theme. This is achieved by adding the appropriate CSS file to your application’s HTML:
<!-- Syncfusion EJ2 Styles -->
<link href="https://cdn.syncfusion.com/ej2/styles/compatibility/{{theme-name}}.css" rel="stylesheet" />
<!-- BoldReports Styles -->
<link href="https://cdn.boldreports.com/{{Bold Reports version}}/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" />
<link href="https://cdn.boldreports.com/{{Bold Reports version}}/themes/{{theme-name}}/bold.theme.compatibility.min.css" rel="stylesheet">
Note: Make sure to replace {{Bold Reports version}} with the actual version number of Bold Reports you are using and {{theme-name}} with the name of the theme you wish to apply.
Specific Theme Integration
Here are the CDN links for each specific theme:
1. Bootstrap Theme
For integrating the Bootstrap theme, include the following CDN link.
<!-- Syncfusion EJ2 Styles -->
<link href="https://cdn.syncfusion.com/ej2/styles/compatibility/bootstrap.css" rel="stylesheet" />
<!-- 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.30/content/bootstrap-theme/bold.theme.compatibility.min.css" rel="stylesheet">
2. Bootstrap4 Theme
For the Bootstrap4 theme, use the following CDN link:
<!-- Syncfusion EJ2 Styles -->
<link href="https://cdn.syncfusion.com/ej2/styles/compatibility/bootstrap4.css" rel="stylesheet" />
<!-- 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.30/content/bootstrap4/bold.theme.compatibility.min.css" rel="stylesheet">
3. Material Theme
To apply the Material theme, add this CDN link:
<!-- Syncfusion EJ2 Styles -->
<link href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" rel="stylesheet" />
<!-- 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.30/content/material/bold.theme.compatibility.min.css" rel="stylesheet">
4. High Contrast 01 Theme
For the High Contrast 01 theme, include this CDN link:
<!-- Syncfusion EJ2 Styles -->
<link href="https://cdn.syncfusion.com/ej2/styles/compatibility/highcontrast.css" rel="stylesheet" />
<!-- 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.30/content/high-contrast-01/bold.theme.compatibility.min.css" rel="stylesheet">
5. High Contrast 02 Theme
For the High Contrast 02 theme, use this CDN link:
<!-- Syncfusion EJ2 Styles -->
<link href="https://cdn.syncfusion.com/ej2/styles/compatibility/highcontrast.css" rel="stylesheet" />
<!-- 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.30/content/high-contrast-02/bold.theme.compatibility.min.css" rel="stylesheet">
6. Office 365 Theme
To integrate the Office 365 theme, add the following CDN link:
<!-- 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.30/content/office-365/bold.theme.compatibility.min.css" rel="stylesheet">
You should refer to the EJ2 scripts before the Bold Reports scripts. Refer to this documentation for details.
By following these instructions and incorporating Bold Reports themes, you can ensure that your application’s reporting components are visually consistent and adhere to the latest design standards.
Migrating to Report Viewer v2.0
The new Report Viewer v2.0 component using the EJ2 controls has been introduced. If you are using the Report Viewer v2.0 component, you do not need to add the compatibility style. To avoid CSS issues, please consider migrating to the Report Viewer v2.0 component. Refer to the following documentation for migration guides:
