Category / Section
How to Hide the Vertical Toolbar in a Blazor Application
Published:
Updated:
In Bold Reports, the vertical toolbar can be completely hidden using the provided API. This customization can significantly enhance the report preview experience by providing a cleaner and more focused interface. It is especially beneficial for applications where the vertical toolbar is not required, ensuring more screen space for the report content.
Follow the steps below to hide the vertical toolbar in a Blazor application:
- Modify the boldreports-interop.js file to include the following code snippet:
window.BoldReports = {
RenderViewer: function (elementID, reportViewerOptions) {
$("#" + elementID).boldReportViewer({
reportPath: reportViewerOptions.reportPath,
reportServiceUrl: reportViewerOptions.serviceURL,
toolbarSettings: {
toolbars: ej.ReportViewer.Toolbars.All & ~ej.ReportViewer.Toolbars.Vertical
}
});
}
}
- Update both your Bold Reports NuGet package and script versions to ensure compatibility. These changes are supported starting from version V6.3.26.
Output:
After implementing the above steps, the vertical toolbar will be completely hidden in the report viewer, resulting in a cleaner and more streamlined report interface.