How to Hide the Floating Report Toolbar After a Specific Duration in V2 Report Viewer
The Bold Reports V2 report viewer includes a feature that automatically hide the floating report toolbar after a specific duration, enhancing the user experience when scrolling through data-rich first pages. This functionality is achieved using the “AutoHideDelay” property within the toolbar settings. By default, the toolbar disappears after 5 seconds, but this duration can be customized as needed. This feature prevents the toolbar from covering essential report content, providing unobstructed access to data.
JavaScript Application
1. Create a JavaScript Application
- Create a JavaScript application by following this documentation.
2. Adding the autoHideDelay property in JavaScript
- Add the autoHideDelay property inside the toolbarSettings in your JavaScript application using the following code snippet.
<script type="text/javascript">
$(function () {
$("#viewer").boldReportViewer({
reportServiceUrl: "https://demos.boldreports.com/services/api/ReportViewer",
reportPath: 'sales-order-detail.rdl',
toolbarSettings: {
autoHideDelay: '2'
}
});
});
</script>
A sample application is also attached here for reference.
ASP .NET Core Application
1. Create an ASP .NET Core Application
- Create an ASP .NET Core application by following this documentation.
2. Register ViewBag.Parameters in index.cshtml
- Open the index.cshtml file and register the ViewBag.toolbarSettings for the Bold Reports Viewer by adding the following code:
For example, register the ViewBag.toolbarSettings for the Bold Reports Viewer by adding the following code:
<bold-report-viewer id="viewer" report-path="Sales Report.rdl" report-service-url="/api/ReportViewer" toolbar-settings="ViewBag.toolbarSettings"></bold-report-viewer>
3. Register Toolbar Settings in Homecontroller.cs
- Open the Homecontroller.cs file and add the following code snippet to register toolbar settings, adjusting the AutoHideDelay value as needed:
public ActionResult Index()
{
ViewBag.toolbarSettings = new BoldReports.Models.ReportViewer.ToolbarSettings();
ViewBag.toolbarSettings.Items = BoldReports.ReportViewerEnums.ToolbarItems.All
& ~BoldReports.ReportViewerEnums.ToolbarItems.Parameters;
ViewBag.toolbarSettings.AutoHideDelay = 2; // Customize the delay as per your requirement
return View();
}
- Save the changes made to Homecontroller.cs and index.cshtml. Then, render the application to see the auto-hide functionality in action. The floating toolbar will now disappear after the specified duration (in this example, 2 seconds).
Initially, the toolbar will auto-hide after 5 seconds. Users can also customize the toolbar’s auto-hide feature using the AutoHideDelay API.
Initial SNAP after scrolling:
After two seconds SNAP:
A sample application is also attached here for reference.