Articles in this section
Category / Section

How to Hide the Floating Report Toolbar After a Specific Duration in V2 Report Viewer

Published:
Updated:

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

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:

image.png

After two seconds SNAP:

image.png

A sample application is also attached here for reference.

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied