Articles in this section
Category / Section

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

  1. Configure Preview Options
    Use the previewOptions object to customize the parameter panel position. Specifically, configure the toolbarRenderMode and parameterSettings.position properties.

  2. 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>
    
  3. 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.

  1. 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):

    Default Parameter Panel

  • Customized Preview (Top Panel):

    Top Parameter 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.

See Also

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied