Category / Section
How to Enable Auto-Refresh in the Bold Reports Viewer When Modifying Parameter Values
Published:
Updated:
The auto-refresh option allows the ReportViewer to refresh automatically when parameter values are modified, eliminating the need to manually click the View Report button.
Steps to implement auto-refresh:
-
Create a simple JavaScript Report Viewer.
-
To enable auto-refresh functionality, develop a function that continually monitors changes in parameter values by comparing the current value to the previous one. If the values do not match, initiate a request for report refresh and adjust the last checked value. Schedule the next check after a designated interval using the setTimeout method.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- Include necessary scripts and stylesheets -->
</head>
<body style="overflow: hidden; position: static; margin: 0; padding: 0; height: 100%; width: 100%;">
<!-- Viewer div -->
<div id="viewer" style="position: absolute; height: 100%; width: 100%;"></div>
<!-- Scripts -->
<script type="text/javascript">
$(function () {
// Initialize Bold Report Viewer
var reportViewer = $("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewerWebApi",
reportPath: 'sales-order-detail.rdl'
}).data("boldReportViewer");
// Auto-refresh function
function checkParameterChange() {
var currentValue = $("#viewer_Param_101").val();
if (currentValue !== checkParameterChange.lastValue) {
$("#viewer_viewReportClick").click();
checkParameterChange.lastValue = currentValue;
}
setTimeout(checkParameterChange, 1000); // Schedule next check
}
// Initial check
checkParameterChange();
});
</script>
</body>
</html>