Many uncertainties and difficulties are involved in a usual JavaScript programming environment like - some of the browsers may ignore the javascript codes under the scripts section completely or partially due to its complexity and so on. To overcome all such inconveniences, Unobtrusive JavaScript support has been introduced in order 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 goal of the unobtrusive support is to achieve the clear separation of both the HTML content and behavior, so as to enhance the page loading time and to make the code updating easier. Bold Reports JavaScript have separate integration library to achieve the Unobtrusive JS support. To make use of Unobtrusive support with our Bold Reports JavaScript components, it is necessary to 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/6.3.16/scripts/common/ej.unobtrusive.min.js></script>Here, 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 demonstration of such data-role declaration with a simple ReportViewer control creation is shown below,
Refer the ej.unobtrusive.min.js file in your application along with the other script and CSS reference section and add the code for defining the ReportViewer control with the basic HTML mark-up tags along with its attributes defined with data-bold keyword prepended as shown below,
<html>
<head>
...
<script src=http://cdn.boldreports.com/6.3.16/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 above code,
processingmodeis one of theReportViewerproperty to set the processing mode for the control, which is defined here with data-bold keyword prepended to it.