Use Bold Reports® Report Viewer and Report Designer with unobtrusive JavaScript

Bold Reports® supports unobtrusive JavaScript, so you can create the Report Viewer and Report Designer with HTML tags and data-bold attributes instead of initializing them in script. Some browsers may ignore JavaScript code in the scripts section completely or partially because of its complexity. To overcome all such inconveniences, Unobtrusive JavaScript support has been introduced to make it easier for the users to create all our Bold Reports® components with basic level HTML tag-like structure.

One of the main goals of the unobtrusive support is to separate the HTML content from the behavior, so the page loads faster and the code is easier to update. Bold Reports® JavaScript has a separate integration library for the Unobtrusive JS support. To use Unobtrusive support with the Bold Reports® JavaScript components, refer the ej.unobtrusive.min.js file in your application.

The ej.unobtrusive.min.js file can be accessed from the following location, which can then be copied and referred in your application.

<script src=http://cdn.boldreports.com/15.1.10/scripts/common/ej.unobtrusive.min.js></script>

How do I use Report Viewer and Report Designer with unobtrusive JavaScript?

To use the Bold Reports® Report Viewer and Report Designer with unobtrusive JavaScript, define the component with HTML mark-up tags, set its name in the data-role attribute, and prefix its properties with data-bold.

The HTML5 syntax is used for defining any of the control and its properties, instead of manually converting the HTML elements into Bold Reports® widgets through JavaScript. All the components can be initialized with usual HTML mark-up tags, by setting the name of the component to the data-role attribute in lowercase.

The data-role type is enabled by default. Therefore, while making use of the data-role in control creation, data-bold keyword should be prepended to all the properties that we need to define for a control.

The following example creates a simple ReportViewer control with a data-role declaration.

Refer the ej.unobtrusive.min.js file in your application along with the other script and CSS references. Then add the code that defines the ReportViewer control with basic HTML mark-up tags and attributes prefixed with the data-bold keyword:

    <html>
    <head>
    ...
    <script src=http://cdn.boldreports.com/15.1.10/scripts/common/ej.unobtrusive.min.js></script>
    </head>

    <body>
    <!-- Report Viewer component script-->
    <div style="width:100%; height:60%; position:absolute;">
    <div id="viewer" data-role="boldreportviewer" data-bold-processingmode='local' data-bold-enablenotificationbar='true' ></div>
    </div>
    </body>

    </html>

In the preceding code, processingmode is one of the ReportViewer property to set the processing mode for the control, which is defined here with data-bold keyword prepended to it.