Embedded
Schedule Free DemoTry it Free
Search results
PDF

How to use the ReportViewer along with EJ2 controls

For using the Bold Reports with EJ1, you need to ensure the compatibility styles, the script order is maintained with following suggestions:

Styles

For style, you need to refer the compatibility styles of EJ2 from Bold Reports and Bold Reports styles should be referred before 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" />

Scripts

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="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/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>

If your application is already using any of the essential JS2 without ej2.min.js, then refer the Bold Reports EJ2 dependent scripts from Syncfusion.

<head>
 @* Syncfusion 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>

Script compatibility for ASP.NET Core

Add compatibility, use the following code in the Layout.cshtml page. Since BoldReports components and EJ2 controls have same library names to perform different actions, conflicts may occur when you refer these both controls in same application. To overcome this, extend these libraries in ej namespace in ASP.NET Core platform.

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

Using EJ2 components with JavaScript

Hence, while using the EJ2 components along with Bold Reports, ejs should be used as the reference to initialize the EJ2 components.

For example, if you are using the EJ2 grid component along with Bold Reports, then you need to initialize the grid component using the following code sample.

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

See also

Previous
Next