Hide the Data Icon from the Vertical Toolbar in Blazor Report Designer

In the Bold Reports Blazor Designer, you can customize the configuration pane to restrict access to specific features, such as the Data panel. This approach helps prevent users from modifying data sources or datasets while still allowing access to other design tools. It is ideal for controlled environments where data configurations must remain unchanged.

Steps to Hide the Data Icon

Step 1: Update the Interop File

In your Blazor project, navigate to wwwroot\scripts\boldreports-interop.js.

Add or update the following JavaScript code to customize the configuration pane:

// Interop file to render the Bold Report Designer component with properties.
window.BoldReports = {
    RenderDesigner: function (elementID, reportDesignerOptions) {
        $("#" + elementID).boldReportDesigner({
            serviceUrl: reportDesignerOptions.serviceURL,
            configurePaneSettings: { 
                items: ej.ReportDesigner.ConfigureItems.All & ~ej.ReportDesigner.ConfigureItems.Data 
            }
        });
    }
};

Code Explanation

Component	Description
`ej.ReportDesigner.ConfigureItems.All`	Bitwise flag that includes all configuration pane items by default.
`~ej.ReportDesigner.ConfigureItems.Data`	Inverts the Data flag to exclude it from the pane using bitwise NOT (~) operator.
`&`	Bitwise AND operator that combines flags to include all items except Data.

Available Configuration Pane Options

You can further customize the configuration pane using the following options in configurePaneSettings.items:

Option	Description
Property	Controls the visibility of the Properties panel
Data	Controls the visibility of the Data panel
Parameter	Controls the visibility of the Parameters panel
ImageManager	Controls the visibility of the Image Manager panel
All	Includes all configuration pane items

You can combine multiple options using bitwise operators. (e.g., All & ~Data & ~Parameter) for multiple exclusions.

Step 2: Preview the Changes

Save the file and rebuild your Blazor application.
Launch the Report Designer. The Data icon will no longer appear in the right-side vertical toolbar.

Sample Application: Download the sample application for your reference.

Conclusion

Hiding the Data icon in the Bold Reports Blazor Designer is an effective way to restrict access to data configurations. This customization helps maintain data integrity while still allowing users to work with essential design features.

Was this article useful?

Dislike

Comments (0)