How to Customize the Parameter Panel Position in Bold Reports Designer Preview
When designing reports with Bold Reports Designer, you can customize the parameter panel in the report preview to improve usability and streamline interaction. By default, the parameter panel appears on the right side of the preview, but you can reposition it to the top, left, or bottom using the previewOptions
properties. This flexibility enhances the user experience by making parameter input more accessible.
This guide explains how to dock the parameter panel at the top of the report preview in Bold Reports v2.0 Report Designer, using the toolbarRenderMode
and parameterSettings
properties.
Steps to Dock the Parameter Panel at the Top
-
Configure Preview Options
Use thepreviewOptions
object to customize the parameter panel position. Specifically, configure thetoolbarRenderMode
andparameterSettings.position
properties. -
Set Toolbar and Position Properties
SettoolbarRenderMode
toej.ReportViewer.ToolbarRenderMode.Classic
andparameterSettings.position
toej.ReportViewer.Position.Top
. This combination ensures the parameter panel is docked at the top when using the Classic view mode.<script type="text/javascript"> $(function () { $("#designer").boldReportDesigner({ serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI", previewOptions: { toolbarRenderMode: ej.ReportViewer.ToolbarRenderMode.Classic, parameterSettings: { position: ej.ReportViewer.Position.Top } } }); }); </script>
-
Implement the JavaScript HTML Page
The following is a complete example of a JavaScript HTML page for Bold Reports v2.0 Report Designer, docking the parameter panel at the top:<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Report Designer with Top Parameter Panel</title> <!-- Report Designer component styles --> <link href="https://cdn.boldreports.com/5.4.37/content/v2.0/tailwind-light/bold.report-designer.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.css" rel="stylesheet" /> <script src="https://cdn.boldreports.com/external/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/codemirror.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/show-hint.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/addon/hint/sql-hint.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/sql/sql.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.37.0/mode/vb/vb.min.js" type="text/javascript"></script> <!-- Report Designer component dependent scripts --> <script src="https://cdn.boldreports.com/5.4.37/scripts/v2.0/common/bold.reports.common.min.js"></script> <script src="https://cdn.boldreports.com/5.4.37/scripts/v2.0/common/bold.reports.widgets.min.js"></script> <!-- Report Viewer and Designer component scripts --> <script src="https://cdn.boldreports.com/5.4.37/scripts/v2.0/bold.report-viewer.min.js"></script> <script src="https://cdn.boldreports.com/5.4.37/scripts/v2.0/bold.report-designer.min.js"></script> </head> <body> <!-- Container for the Bold Report Designer widget --> <div style="height: 600px; width: 950px; min-height: 400px;" id="designer"></div> <script type="text/javascript"> $(function () { $("#designer").boldReportDesigner({ serviceUrl: "https://demos.boldreports.com/services/api/ReportingAPI", previewOptions: { toolbarRenderMode: ej.ReportViewer.ToolbarRenderMode.Classic, parameterSettings: { position: ej.ReportViewer.Position.Top } } }); }); </script> </body> </html>
Note: Replace the serviceUrl
with the actual Web API controller URL for the Report Designer.
- Run the Application
Save the changes and run your application. The parameter panel will now appear at the top of the Bold Reports Designer preview.
Visual Comparison
-
Default Preview (Right Panel):
-
Customized Preview (Top Panel):
Parameter Panel Position Options
You can set the parameter panel position to any of the following values in Bold Reports v2.0 Report Designer when toolbarRenderMode
is set to Classic
:
Position | Code |
---|---|
Top | ej.ReportViewer.Position.Top |
Bottom | ej.ReportViewer.Position.Bottom |
Right | ej.ReportViewer.Position.Right |
Left | ej.ReportViewer.Position.Left |
Sample Application
By following the steps above and using the provided code, you can successfully dock the parameter panel at the top in Bold Reports v2.0 Report Designer. Download an Embedded JavaScript Report Designer sample with these changes from this link.
Note: This feature is supported in Bold Reports v2.0 Report Designer version 5.4.36 or higher. For migration guidance from earlier versions (e.g., pre-v5.2.xx) to v5.2.xx and above, refer to the migration documentation.