How to Hide the Report Rendering Popup in Bold Reports
Bold Reports® displays a default loading spinner and a “Rendering” popup to keep users informed. While helpful, some embedding scenarios need a more seamless integration where this popup is hidden to match a specific application design or branding. You can suppress this element in the JavaScript Report Viewer by setting the waitingPopupTemplate property in your initialization code.
Step-by-Step Instructions
1. Configure the Report Viewer JavaScript
To hide the rendering popup, set the waitingPopupTemplate property to an empty string in your Report Viewer initialization script.
Open the JavaScript file or the <script> section of your HTML page and modify your boldReportViewer initialization as shown below:
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer({
// Replace with your actual Report Service URL
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
// Replace with your actual report path
reportPath: '~/Resources/docs/sales-order-detail.rdl',
// Set waitingPopupTemplate to an empty string to hide the rendering popup
waitingPopupTemplate: ""
});
});
</script>
2. Verify the Customization
After updating the JavaScript configuration, save your changes and refresh your browser to verify the behavior.
- Before customization: The standard “Rendering” popup and spinner appear while the data is being fetched.
- After customization: The rendering popup is hidden, and the report content displays directly once processing is complete.
Sample Application
Download the sample application that demonstrates this JavaScript configuration: Download the sample application
