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).

Initial SNAP after scrolling:

After two seconds SNAP:

A sample application is also attached here for reference.