How to Customize the Parameter Panel Position in Bold Reports Designer Preview

Published:

Updated:

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 the previewOptions object to customize the parameter panel position. Specifically, configure the toolbarRenderMode and parameterSettings.position properties.

Set Toolbar and Position Properties
Set toolbarRenderMode to ej.ReportViewer.ToolbarRenderMode.Classic and parameterSettings.position to ej.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.