How to Hide the Settings Button in the Bold Reports Blazor Report Viewer Toolbar
You can remove the Settings button from the Bold Reports® Blazor Report Viewer toolbar by configuring the viewer’s toolbarSettings in the JavaScript interop file. Enables users to simplify the toolbar for an audience that does not require certain controls, and limits controls in the viewer to report functionalities such as export and layout settings.
Applies to: Bold Reports Blazor Report Viewer projects that use wwwroot/scripts/boldreports-interop.js. Check the documentation for your installed version.
Step-by-Step Instructions
Step 1: Locate the JavaScript Interop File
Open your Blazor project in Visual Studio and navigate to:
wwwroot/scripts/boldreports-interop.js
This file contains the initialization logic for the Bold Reports Report Viewer component.
Step 2: Add the Toolbar Setting to Your Existing Viewer Options
In the RenderViewer function, add the following toolbarSettings property to the options passed to boldReportViewer. Merge it into the existing options object; do not replace the object, since it may contain your report path, service URL, parameters, authorization token, or other settings.
toolbarSettings: {
items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Settings
}
For example, retain the existing options and add the toolbar setting alongside them:
window.BoldReports = {
RenderViewer: function (elementID, reportViewerOptions) {
$("#" + elementID).boldReportViewer({
reportPath: reportViewerOptions.reportName,
reportServiceUrl: reportViewerOptions.serviceURL,
toolbarSettings: {
items: ej.ReportViewer.ToolbarItems.All & ~ej.ReportViewer.ToolbarItems.Settings
}
});
}
};
This follows the JavaScript Report Viewer toolbar customization guide, which shows using ToolbarItems.All & ~ToolbarItems.<Item> to exclude an item while retaining the other toolbar items. Verify that ej.ReportViewer.ToolbarItems.Settings is available in the version of the viewer bundled with your Blazor project.
Step 3: Verify the Change
- Save
boldreports-interop.js. - Clean and rebuild the Blazor application so the updated script is included.
- Run the application and open a report in the Report Viewer.
- Confirm the Settings button is no longer displayed and that the other toolbar items and existing viewer options still work.
Preview
1. Before Customization
The Settings button is visible in the vertical toolbar.
2. After Customization
The Settings button is removed from the toolbar.
Download the sample application here.
