How to use the ReportViewer along with EJ2 controls

To use the Bold Reports® Report Viewer with EJ2 controls, reference the EJ2 compatibility styles and keep the script order given in the following sections.

Which styles do I reference for EJ2 compatibility?

For EJ2 compatibility, reference the EJ2 compatibility styles from Bold Reports®, and reference the Bold Reports® styles before the EJ2 styles.

  <link href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" rel="stylesheet" />
  <link href="https://cdn.boldreports.com/15.1.10/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" />
  <link href="https://cdn.boldreports.com/15.1.10/content/material/bold.theme.compatibility.min.css" rel="stylesheet" />

In what order do I load EJ2 and Bold Reports® scripts?

Load the EJ2 scripts before the Bold Reports® scripts, as in the following example:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BoldReports ReportViewer and EJ2 controls</title>
    @* Syncfusion<sup>®</sup> 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/15.1.10/content/bold.widgets.core.compatibility.min.css" rel="stylesheet" />
    <link href="https://cdn.boldreports.com/15.1.10/content/material/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<sup>®</sup> Essential JS 2 Scripts *@
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
    @* BoldReports Scripts *@
    <script src="https://cdn.boldreports.com/15.1.10/scripts/common/bold.reports.common.min.js"></script>
    <script src="https://cdn.boldreports.com/15.1.10/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/15.1.10/scripts/data-visualization/ej.chart.min.js"></script>

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

If your application already uses individual Essential JS 2 scripts without ej2.min.js, reference the Bold Reports® EJ2 dependent scripts from Syncfusion®.

<head>
 @* Syncfusion<sup>®</sup> Essential JS 2 Scripts *@
    <script src="https://cdn.syncfusion.com/ej2/ej2-buttons/dist/global/ej2-buttons.min.js"></script>
    @* BoldReports Scripts *@
   <!--Used to render the gauge item. Add this script only if your report contains the gauge report item. -->
   <script src="https://cdn.syncfusion.com/ej2/ej2-base/dist/global/ej2-base.min.js"></script>
   <script src="https://cdn.syncfusion.com/ej2/ej2-data/dist/global/ej2-data.min.js"></script>
   <script src="https://cdn.syncfusion.com/ej2/ej2-pdf-export/dist/global/ej2-pdf-export.min.js"></script>
   <script src="https://cdn.syncfusion.com/ej2/ej2-svg-base/dist/global/ej2-svg-base.min.js"></script>
   <script src="https://cdn.syncfusion.com/ej2/ej2-lineargauge/dist/global/ej2-lineargauge.min.js"></script>
   <script src="https://cdn.syncfusion.com/ej2/ej2-circulargauge/dist/global/ej2-circulargauge.min.js"></script>

</head>

Reference of EJ2 scripts from Bold Reports® and Syncfusion® components

//Ej2
<script src=�https://cdn.syncfusion.com/�/�/ej2-maps.min.js�></script>
//BoldReports
<script src=�https://cdn.boldreports.com/�/�/ej2-maps.min.js�></script>

How do I fix script conflicts with EJ2 in ASP.NET Core?

To fix script conflicts between Bold Reports® components and EJ2 controls in ASP.NET Core, add the following code to the Layout.cshtml page. Bold Reports® components and EJ2 controls use the same library names for different actions, so conflicts can occur when you reference both in one application. The code extends these libraries in the ej namespace.

    <script>
        var dataCopy = Object.assign({}, ej.data);
        $.extend(ej, Syncfusion<sup>®</sup>);
        $.extend(ej.data, dataCopy);
    </script>

How do I initialize EJ2 components with Bold Reports® in JavaScript?

When you use EJ2 components with Bold Reports®, initialize the EJ2 components with the ejs reference.

For example, to use the EJ2 Grid component with Bold Reports®, initialize the grid with the following code sample.

var grid = new ejs.grids.Grid({dataSource: data});

See also